jQueryで設定したイベントハンドラが消える

質問

jQueryについての質問です。
ちょっと言葉での説明が難しいので、具体的なコードを記載します。

=== JavaScript ===
var clicked = function () { alert(1); };
var jqButton = $("<input type='button' value='test' />");

jqButton.click(clicked);

$(function() {
$("#showButton").click(function () { $("#test").html(jqButton); });
$("#hideButton").click(function () { $("#test").html(""); });
});

=== HTML ===
<input type="button" id="showButton" value="show" />
<input type="button" id="hideButton" value="hide" />
<div id="test"></div>

showボタンをクリックすると、testボタンが表示されます。
hideボタンをクリックすると、testボタンが消えます。
testボタンをクリックすると、alert(1) が実行されます。

という内容なのですが、一度hideしてから再度showして現れたtestボタンをクリックしても、
何も起きません。

仮に、jqButton.click(clicked); の部分を、
jqButton[0].attachEvent("onclick", clicked); などにすると、再表示させたtestボタンも動作します。

これはjQueryのイベントハンドラ設定APIを使った時特有の症状だと思うのですが、
なぜこのような結果になるのでしょうか。
てっきり、$.click()でイベントハンドラを設定すると、
内部でattachEventとかaddEventListnerとかが走るだけだと想像してましたが・・・

また、attachEventなど使わずに、jQueryの機能を使って、
再表示させてtestボタンも動作させるには、どうしたらいいでしょうか。

ご存知の方いましたら、お願い致します。

回答No.1

tegra · ベストアンサー

「$("#test").html("");」の指定でセットしていたclickイベントが消されているみたいですね。
なぜイベントまで消えるかはわかりませんが、JQueryのソースコードみたら確かに
empty()でイベント消してる箇所がありました。

で表示、非表示的な処理はshow関数とhide関数を使えばいいと思います。

=== JavaScript ===
var clicked = function () { alert(1); };
var jqButton = $("<input type='button' value='test' />");

jqButton.click(clicked);

$(function() {
$("#test").html(jqButton);
$("#showButton").click(function () { $("#test").show(); });
$("#hideButton").click(function () { $("#test").hide(); });
});

=== HTML ===
<input type="button" id="showButton" value="show" />
<input type="button" id="hideButton" value="hide" />
<div id="test" style="display:none;"></div>

お礼

回答ありがとうございます。
自分でも調べてみたところ、イベントハンドラを削除しているのは
メモリリーク対策とのことでした。
確かにhtml()で要素のオブジェクトを参照できなくなってしまったら、
イベントハンドラとDOMで引き起こされるメモリリークを解消できませんね・・・

というわけで解決です。
ありがとうございました。