jquery の click ハンドラにはまった

今まで知らなくてはまったのでメモ。

例えばjqueryで、何かのクリックハンドラをこんな風に書くじゃないですか。

$("#some-button").click(function(){ console.log("hoge"); });
$("#some-button").click(); // -> hoge

だけど次のような感じで、クリックハンドラを別の処理にしようとすると……

$("#some-button").click(function(){ console.log("hage"); });
$("#some-button").click(); // -> hoge hage

こんな感じで、次のイベントハンドラが、前のイベントハンドラに続けて実行されるようになってしまう。

僕のイメージでは、クリックハンドラを動的に「上書き」したつもりだったのが、jqueryのclickはaddEventListenerで実装されているようで、既存のイベントハンドラの「次に」行う処理として追加されてしまうようです。

じゃあクリックのハンドラを上書きしたいときはどうすれば良いんだろうと思ったのですが…

解決策1

まず最初は次のように書きました。

$("#some-button")[0].onclick = function(){ console.log("hoge"); };
$("#some-button").click(); // -> hoge と出力される
$("#some-button")[0].onclick = function(){ console.log("hage"); };
$("#some-button").click(); // -> hage と出力される

で、$("#some-button")[0]のあたりが醜いのですが、これで一応は期待通りの動きになります。

解決策2

しかし正解はコメントでtakahashihidekiさんに教えてもらった unbind してから bind する方法みたいです。

$("#some-button").click(function(){ console.log("hoge") }).click(); // -> hoge
$("#some-button").click(function(){ console.log("hage") }).click(); // -> hoge hage
$("#some-button").unbind("click").click(function(){ console.log("hige"); }); // -> hige