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ボタンも動作させるには、どうしたらいいでしょうか。
ご存知の方いましたら、お願い致します。
お礼
ヘルプの画面（英語版？）とはこちらの画面は違い、 はじめ解りにくかったですが、はっと！わかるようになりました 大変参考になりました ありがとうございました！！