1

问题的小提琴

$('div').not('#logs').each(function () {
    var id = $(this).attr('id');
    $("#" + id).bind('click', function () {
        $('#logs').append('\n' + $(this).attr('id') + '\n');
    });
});

$(".test").live('click', function () {
    alert('from x');
});

我会做的是，创建一些 div，并使用每个函数循环遍历所有 div，并为每个 div 绑定一个单击事件。

在类名“test”的每个 div 中都有跨度，我将按照上面指定的方式将实时功能绑定到这些跨度。单击跨度时，只会出现“来自 x”的警报，但我无法理解这种行为。

行为就像，绑定功能也在工作，实时功能也在工作。

请原谅我的句子形成错误，我解释这个问题有点低。等待行为的解释。

谢谢

4

2 回答 2

0

事件绑定到附加事件时页面上存在的元素。

在您的情况下，发生这种情况时元素始终存在于页面上。所以这两种绑定事件的方式都会起作用。

第二种情况是事件委托，用于将事件绑定到动态创建的事件，即绑定事件DOM后附加到的元素。因此，当您使用live绑定事件时，该事件将附加到始终存在的文档中。其中使用了事件冒泡的概念

Ajax也许在请求后插入到 dom 的元素

代码

您不需要$.each循环，因为选择器会选择与其匹配的所有元素

$('div').not('#logs').click( function () {
        $('#logs').append('\n' + this.id + '\n');
});

// live has be deprecated to delegate events as of jQuery 1.7
// use on instead to bind the events for event delegation
$(document).on('click', ".test", function () {
    alert('from x');
});

检查小提琴

于 2013-07-18T07:39:45.653 回答
0

事件在 DOM 树中冒泡，触发沿途绑定元素的任何处理程序。

您通常会通过调用来停止传播，event.stopPropagation()但是由于该.live()方法会在事件传播到文档顶部后处理事件，因此您的父元素click()方法将已经被调用。

您可以通过将其更改为以下内容来使您的代码按预期工作：

$(".test").on('click', function (event) {
    alert('from x');
    event.stopPropagation();
});

如果您确实需要使用.live()，例如，如果您正在动态创建这些，则改为使用.bind()您的父元素，.live()也可以使用，例如：

$('div').not('#logs').each(function () {
    var id = $(this).attr('id');
    $("#" + id).live('click', function () {
        $('#logs').append('\n' + $(this).attr('id') + '\n');
    });
});

$(".test").live('click', function (event) {
    alert('from x');
    event.stopPropagation();
});

您还可以使用更受欢迎的 '.on()' 方法来代替折旧的方法.live()，如下所示：

$('div').not('#logs').each(function () {
    var id = $(this).attr('id');
    $(document).on('click', "#" + id, function () {
        $('#logs').append('\n' + $(this).attr('id') + '\n');
    });
});

$(document).on('click', ".test", function (event) {
    alert('from x');
    event.stopPropagation();
});
于 2013-07-18T07:46:44.067 回答