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

如何尝试

bind（'click'，function（）{}）

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

因为这些元素是由一些jquery代码

自动生成的

希望这会有所帮助

删除带有列表项的按钮

3 个答案: