読者です 読者をやめる 読者になる 読者になる

anti scroll

ブラウザと小説の新しい関係を模索する

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