-1

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

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 代码针对所有元素，它也不会创建新按钮。

我知道 live() 自 1.7 起不再受支持，并已被 on() 取代。如您所见，上面的代码使用了 on() 事件，但是我没有得到 live() 用来提供的结果。

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

谢谢。

4

2 回答 2

4

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

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

这正是.live()幕后所做的（它将事件处理程序委托给document）。这不是很有效，因为document你可以走的尽可能远。您可以委托事件处理程序越接近目标元素越好。

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

于 2012-11-29T15:52:59.080 回答
1

.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.
于 2012-11-29T15:53:32.543 回答