Question

我找到了这个例子：http://jsfiddle.net/jaredwilli/tZPg4/4/

$('#addScnt').live('click', function () {
    $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
    i++;
    return false;
});

$('#remScnt').live('click', function () {
    if (i > 2) {
        $(this).parents('p').remove();
        i--;
    }
    return false;
});

，当我尝试复制结果并尝试jQuery不选择创建的<a>时

我的小提琴： http://jsfiddle.net/sonicdeadlock/y3ACz/

$(".addItem").on("click", function () {
    var newInput = $('<p><input type="text" class="item" placeholder="item"></input><a href="#" class="removeItem">remove</a></p>');
    $(this).closest(".category").append(newInput);
});

$(".removeItem").on("click", function () {
    $(this).closest("p").remove();
});

Answer 1

您正在添加项目，因此您需要使用事件委派：

$(document).on("click", ".removeItem", function() {

原因是这些处理程序在运行时绑定，并且在运行时，这些新元素不存在。将它们绑定到可以做到的事情上。至于您找到的工作示例，它使用.live。 .live曾用于此，但在更高版本的jQuery中被.on替换

Answer 2

on()具有与已弃用的live()方法不同的委派语法。

您首先必须为元素使用选择器，或者document本身作为页面的永久资产，并且是您要定位的元素的祖先

像：

$('.category').on('click', '.addItem',function(){
  /* handler code*/
})

OR

$(document).on('click', '.removeItem',function(){
  /* handler code*/
})

当元素始终在页面中时，您可以使用on()使用元素作为选择器，使用您当前的语法。

因此，有两种不同的方法可以使用on()

API docs for on()

Answer 3

将您的选择器移到未被替换的父级，然后向下筛选到动态元素：

$('body').on("click", ".addItem", function(){
    // your stuff here...
});

如果你有比“身体”更具体的东西，我建议改用它。

Answer 4

使用.on()，因为不推荐使用live（）

阅读Event Delegation。

$(document).on("click", ".removeItem", function() { ..code here.. });

语法

$( elements ).on( events, selector, data, handler );

JQuery没有选择添加的元素

4 个答案: