用jquery动态写出li。元素写入后不可点击

Question

我有一个函数，当选中一个复选框时，我动态地将 li 写入空的 ol 中。

代码：

$(":checkbox").click(function() {
    var checkedState = $(this).is(':checked');
    if (checkedState == true) {
       var productName = $(this).attr("title");
       $("#selectedProductsList").append("<li class=\"productList " + this + "\"><p class=\"removeIcon\"><img src=\"images/remove-icon.png\" alt=\"Remove Product\" /></p><span class=\"productName\">"+ productName +"</span></li>");
    };
});

然后，当写出时，会出现一个删除图标，单击该图标将从 ol 中删除该项目。这个删除图标有一个removeIcon类，可以在上面的动态li中看到。

我有一个函数可以处理删除调用，然后执行一些操作： 代码：

$('.removeIcon').click(function() {
 alert("starting");
});

现在我有删除操作，只是想提醒一条消息，它被调用了。但似乎没有进入功能。

除了 .click 方法之外，我还需要通过某种方式访问​​这些动态 li 吗？我看到了这个帖子： 使用 $.click() 动态插入的 DOM 元素不可点击< /a>

他们添加了 .live 与 .click，但这似乎也不起作用。

有什么想法吗？

Answer 1

尝试使用现场活动...

$(".removeIcon").live("click", function () {
    alert("starting");
}

Answer 2

您需要对动态添加的元素使用 live() ($(":checkbox").live('click', ...))，因为 click() 只会运行一次，并且只会捕获到目前为止存在的元素。

Answer 3

使用 .delegate() 而不是 live().

$('#selectedProductsList').delegate('.removeIcon','click',function() {
   alert("starting");
});

使用 .live() 会非常浪费，因为您所定位的元素似乎都在同一个容器中。

Answer 4

如果有想法，为什么不把按钮放在一个对象中呢？这是一个小例子（未经测试，它可以帮助您实现想法，但应该可行）

$(":checkbox").click(function() {
    var checkedState = $(this).is(':checked');
    if (checkedState == true) {
       var productName = $(this).attr("title");
       var product = $('<li class="productList"><span class="productName">'+ productName +'</span></li>"'); // create a object off the product
       var removeButton = $('<p class="removeIcon"><img src="images/remove-icon.png" alt="Remove Product" /></p>'); // create a object off the image aswell
       // now i can add a event to the object 'removeButton', in the same way what u did earlier(like $('.removeIcon'))
       removeButton.bind('click', function() {
            alert("This click function works");
       });

       // now add the remove button in front off the <span class="productName">
       // im using prepend because that function adds HTML in front off the object
       // append adds HTML at the end.

       product.prepend(removeButton);


       // put the product in your HTML
       $("#selectedProductsList").append(product);
    };
});