jquery - 删除带有列表项的按钮

Question

我不知道这个 jQuery 代码有什么问题。我没有收到来自调试器的错误。我对出了什么问题感到迷茫。

<ul id="list"></ul>

<script>

$(document).ready(function() {

$('#show_place_on_screen').click(function () {

var address = $('#address').val();

$("#list").append('<li>' + address + '<input type="button"   

id="delete" value="Delete"/></li>');

});

$("#delete").click(function() { 

    $(this).parent().remove();

});});

</script>

Answer 1

您应该委托click事件，也可以使用类，ID 必须是唯一的：

$(document).ready(function() {
    $('#show_place_on_screen').click(function() {
        var address = $('#address').val();
        $("#list").append('<li>'+address+'<input type="button" class="delete" value="Delete"/></li>');
    });

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

Answer 2

当您附加到列表时，您为每个按钮提供相同的id. 如果 DOM 中的多个元素具有相同的id，您的单击处理程序目标id可能会中断。

尝试：

$("#list").append('<li>' + address + '<input type="button" class="delete" value="Delete"/></li>');

和：

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

此外，您最好希望address不包含任何可能被解释为 HTML 的讨厌的代码。你可能应该逃避它。

Answer 3

试试怎么样

绑定（'点击'，函数（）{}）

而不是当前的 .click(function() {....

由于这些元素是由一些 jquery 代码自动生成的

希望这可以帮助