2

イベント ハンドラーを DOM 要素にバインドし、その後 DOM 要素を破棄するとどうなりますか? イベント ハンドラーのバインドを解除するプロセスを実行する必要がありますか?

<div id="el1">
    <span id="c">Click Me!</span>
</div>
<span id="note">Note...</span>
<script>
    var i=0;
    $("#c").click(function(){
        i++;
        $("#note").html("'Click Me!' was clicked.");
        $("#el1").html("<span id=\"c\">Click Me! ("+i+" time)</span>");
    });
</script>

実際: http://jsfiddle.net/lordloh/FyLdM/

明らかに、イベント ハンドラーは同じ ID を持つ新しい DOM オブジェクトにバインドしません。私が使用している回避策は

<div id="el1">
   <span id="c">Click Me!</span>
</div>
<span id="note">Note...</span>
<script>
var i=0;
$("#c").click(clickHandler);

function clickHandler(){
    i++;
    $("#note").html("'Click Me!' was clicked.");
    $("#el1").html("<span id=\"c\">Click Me! ("+i+" time)</span>");
    $("#c").click(clickHandler);
}
</script>

実際: http://jsfiddle.net/lordloh/FyLdM/1/

私が懸念しているのは、これが悪い習慣なのか、それとも受け入れられるのかということです。このシーケンスが何百万回も繰り返されるとどうなりますか? JavaScript エンジンがメモリ不足のリスクを冒す可能性はありますか?

4

2 に答える 2

2

代わりに、イベントの委任に集中する必要があります。

$('#someWrapper').on('click', '.someClass', function() {
   // do your stuff.
});

次に、要素をラッパーに追加して割り当てる.someClassと、イベントが発生します。

于 2013-01-30T22:30:07.557 に答える
0

要素が作成されるたびにイベントを再バインドする代わりに、AlienWebguyが提案するように、代わりにイベント委任を使用する必要があります。ただし、この場合、domから削除された後はjQueryオブジェクトを指すものがないため、ガベージコレクションで未使用の変数をクリーンアップする必要があります。

于 2013-01-30T22:34:49.500 に答える