Question

在页面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.然后我就是点击.exit关闭div，然后点击#content重新加载content.php。现在我有两个警告：nb作为值10但是它的值也是40，为什么它仍然具有值40？

Answer 1

您正在执行两次匿名功能。所以在不同的范围内有两个变量nb。加载视图后，您的事件处理程序将再次绑定。所以首先解开它：

$(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;
});

Answer 2

这是因为当您删除#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);
    });
});

jquery，我的变量有2个值

2 个答案: