Question

我正在尝试动态添加按钮 - 第一个按钮有效但其他按钮无效。我以前使用live函数，但jQuery 1.9.1删除了该函数。我该怎么做才能让新添加的按钮起作用？

HTML代码：

<div class="take">
    <p>this is the para</p>
    <button class="test">copy</button>
</div>

jQuery代码：

$('.test').on('click', function() {
    var a = $(this).parent();
    new.clone().insertAfter(a);
})

这是jsfiddle。

Answer 1

在克隆中传递true将解决您的问题 - jsfiddle

$('.test').on('click', function() {
    var o = $(this).parent();
    o.clone(true).insertAfter(o);        
})

注意：new是JavaScript中的关键字，因此请勿将其用作变量。

Answer 2

$(document).on('click', '.test', function() {
    var o = $(this).parent();
    o.clone().insertAfter(o);   
});

而不是document使用非动态父ID选择器

http://jsfiddle.net/uk6Bh/1/

要想象：

$('#non-dynamic-parent').on('event', '.dynamic-delegated-element', function() {

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

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型 - 视图 - 控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他HTML之前，文档元素在文档的头部可用，因此可以安全地将事件附加到那里而无需等待文档准备就绪。

Answer 3

您想使用.on()（demo）：

$(document).on('click', '.test', function() {
    var o = $(this).parent();
    o.clone().insertAfter(o);
})

使用jQuery动态添加按钮

3 个答案: