Question

我有HTML：

<button id='pusher'>pusher</button>

<ul id="sortable">
    <li>things here</li>
</ul>

和JavaScript：

$(".del").click(function(e) {
    $(this).parent().remove();
});


$("#pusher").click(function(e) {
    var text = "test";
    var lix = $("<li class='uix' />").text(text);
    lix.append($('<button class="del">xx</button>'));
    lix.appendTo($("#sortable"));
});

我正在尝试使用按钮创建新的<li>元素，然后在按下删除按钮时删除其<li>元素...

但它没有删除。

有什么想法吗？

Answer 1

$(".del").click(function(e) {

这仅绑定运行时存在的.del个元素。您想使用.live。

$(".del").live('click', function(e) {
    $(this).parent().remove();
});

无论何时添加，都会将事件绑定到元素上。

编辑：似乎已弃用.live，请尝试使用.on。

$(document).on('click', '.del', function(e) {
    $(this).parent().remove();
});

Answer 2

您遇到问题的原因是，在使用.click绑定处理程序时，元素不存在。您可以使用.live，但更好的解决方案是动态附加处理程序，因为您控制了元素：

function deleteClicked(e) {
    $(this).parent().remove();
}

$(".del").click(deleteClicked);


$("#pusher").click(function(e) {
    var text = "test";
    var lix = $("<li>").addClass('uix').text(text);
    lix.append($('<button>').addClass('del').text('xx').click(deleteClicked));
    lix.appendTo($("#sortable"));
});

Answer 3

你应该使用jQuery on || live事件绑定，它将为当前和未来与当前选择器匹配的所有元素附加事件处理程序。

jQuery 1.7 +

$(document).on('click', '.del', function(e) {
    $(this).parent().remove();
});

jQuery 1.3 +

$('.del').live('click', function(e) {
    $(this).parent().remove();
});

按程序删除按钮

3 个答案: