0

ページtest.phpで私は次のようにcontent.phpをロードしています：

$(document).on('click', '.test', function () {
        $('#content').load('content.php');
});

content.phpに私はこのJqueryコードを持っています：

$(function() {
   var nb = 10;
   $(document).on('click', '.trigger', function () {
         alert(nb);
         nb +=10;
   });
   $(document).on('click', '.exit', function () { $('#content').html(''); });
});

#content nbを値10として初めてクリックし、それをクリックすることでインクリメントできます。たとえば、3回クリックすると、値が40になります。次にdivを閉じます。 .exitをクリックし、＃contentをクリックしてcontent.phpをリロードします。今、私は2つのアラートを持っています：値10としてnbがありますが、それは値40も持っています、なぜそれはまだ値40を持っているのですか？

4

2 に答える 2

1

匿名関数を2回実行しています。nbしたがって、スコープが異なる2つの変数があります。そして、ビューをロードした後、イベントハンドラーは再びバインドされます。したがって、最初にバインドを解除します。

$(document).off('click.MyEventHandler').on('click.MyEventHandler', '.trigger', function () {
     alert(nb);
     nb +=10;
});

.MyEventHandler他のクリックイベントを無効にしないように、イベントを名前空間に配置しました。ただし、実際には、最も近い親コンテンツをイベントリスナーとして使用する方が適切です。それで：

$('#content').off('click.MyEventHandler').on('click.MyEventHandler', '.trigger', function () {
     alert(nb);
     nb +=10;
});
于 2013-03-19T09:37:48.180 に答える
0

これは、を削除するときに#content、登録されているイベントハンドラーを削除しないためです。

.offを使用してこれを行うことができます

$(function() {
    var fn = function() {
        alert(nb);
        nb += 10;
    };

    var nb = 10;

    $(document).on('click', '.trigger', fn);
    $(document).on('click', '.exit', function() {
        $('#content').html('');
        $(document).off('click', '.trigger', fn);
    });
});
于 2013-03-19T09:38:17.537 に答える