Question

我将以下代码放在一起作为实验：

HTML：

<button>Click Me</button>

jQuery的：

$('button').on('click', function() {

    $newButton = $('<button />');
    $newButton.addClass('newButton');
    $newButton.attr('href', '#');
    $newButton.html('A New Button');

    $('body').append($newButton);


});

代码本身工作正常，正如预期单击按钮时，jQuery会生成一个新按钮。让我感到头疼的问题是，新创建的按钮不会对被点击做出反应，换句话说，它不会创建新按钮，即使jQuery代码针对所有元素。

据我所知，自1.7以来不再支持live（），因此已被on（）取代。如您所见，上面的代码使用on（）事件但是我没有得到live（）用来提供的结果。

显然我在某个地方出错了，有人可以提出建议吗？

感谢。

Answer 1

当您使用.on()时，您需要将事件处理程序委派给DOM树的更高位置：

$("#someCommonAncestor").on("click", "button", function () {
    // Do stuff
});

这正是.live()在幕后所做的事情（它将事件处理程序委托给document）。这不是很有效，因为document就像你可以去的树一样远。越接近目标元素，您可以更好地委托事件处理程序。

这是有效的，因为大多数DOM事件从它们所源自的元素（ target ）通过所有祖先元素向上冒泡树。当事件到达绑定事件处理程序的元素时，jQuery会检查目标是否与选择器匹配（第二个参数为.on()）并执行处理程序（如果有）。

Answer 2

.on应在特定语法中用作委派事件。见下文，

$(container).on('click', 'child-el-selector', function() {
      //your stuff
});

但是我建议您在创建元素时直接绑定处理程序（直接绑定），而不是使用委托事件。如下所示，

function myButtonFx () {
    var $newButton = $('<button />');
    $newButton
        .addClass('newButton')
        .attr({'href': '#'})
        .html('A New Button')
        .on('click', myButtonFx);

    $('body').append($newButton);
}

$('button').on('click', myButtonFx); 
//Note: The above binds only to the button that existed in DOM.

新创建的元素上的事件 - on（）vs live（）

2 个答案: