用 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？我看到了这个帖子： Dynamically Inserted DOM Elements are not Clickable using $.click()

他们在哪里添加 .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);
    };
});