Question

我在创建DOM后创建了一个按钮。该按钮有一个动作。我遇到的问题是将该动作绑定到按钮上。我已经研究过，人们告诉我们.on（）函数，但它似乎没有用。我错过了什么？

HTML

<button id="firstClick">Click me to create another button</button>
<div id="container"></div>

的Javascript

$('#firstClick').click(function() {
    $('#container').append('<button class="second-button">Button after DOM</button>');
});

$('.second-button').on('click', function () {
    alert("Success");
})

Answer 1

使用demoL http://jsfiddle.net/Metsx/或http://jsfiddle.net/ZB2Ns/

API：.on http://api.jquery.com/on/

现在，让您的活动了解.on或document级别所需的点击事件#container，它将事件处理程序附加到jQuery对象中当前选定的元素集

休息应符合您的需要:)

<强>代码

$('#firstClick').click(function() {
    $('#container').append('<button class="second-button">Button after DOM</button>');
});

$(document).on('click', '.second-button', function () {
    alert("Success");
})

Answer 2

你需要告诉DOM，父母听他们的孩子。

问题在于您的新.second按钮是一个新元素，并且您已经在DOM实际存在之前定义了.click函数。

但是所有DOM交互都会触发事件传播（冒泡），因此您可以告诉#container监听来自.second-button的点击事件

或者使用$（document）.on来监听，因为冒泡将一直到文档根目录。

如果你是一个性能极简主义者，那么你只需要执行#container .on，并停止传播，因为不需要前往每个父节点，但你最终可能需要从父节点监听它。 #container，谁知道

DOM创建不起作用后的Jquery操作事件

2 个答案: