Question

我正在尝试删除我添加到已添加的列表中的项目。

该脚本适用于列表中的项目，但不适用于附加的项目。

<script>
$(document).ready(function(){
$('.add').click(function() {
    $(".list").append('<li>'
                              + 'Item '
                              + '<a href="#" class="remove_project_file" border="2">X</a>'
                              + '</li>');

    return false;
});

// using live() will bind the event to all future
// elements as well as the existing ones
$('.remove').on('click', function() {
    $(this).parent().remove();
    return false;
});
});
</script>

<span class="inputname">
    <a href="#" class="add">
        Add
    </a>
</span>

<ul class="list">
    <li>Item <a href="#" class="remove" border="2">X</a></li>
</ul>

</div>

Answer 1

您需要使用。on()的事件委托语法：

变化：

$('.remove').on('click', function() {
    $(this).parent().remove();
    return false;
});

为：

$('.list').on('click', '.remove', function() {
    $(this).parent().remove();
    return false;
});

<强> jsFiddle example

请注意，您还需要将remove类添加到附加的列表项中：

$(".list").append('<li>' + 'Item ' + '<a href="#" class="remove remove_project_file" border="2">X</a>' + '</li>');

来自.on()上的文档：

事件处理程序仅绑定到当前选定的元素;他们在您的代码调用.on（）时页面上必须存在。要确保元素存在且可以选择，请执行事件绑定在文档就绪处理程序中的元素页面上的HTML标记。如果将新HTML注入页面，选择元素并在新HTML之后附加事件处理程序放入页面。

Answer 2

在创建文档之前，您正尝试访问文档中的元素。您需要绑定到页面加载中已存在的元素。将您的JS更改为：

$(document).ready(function(){
    $('body').on('click', '.add', function() {
        $(".list").append('<li>' + 'Item ' + '<a href="#" class="remove_project_file" border="2">X</a>' + '</li>');
    return false;
    });

    $('body').on('click', '.remove', function() {
        $(this).parent().remove();
        return false;
    });
});

Answer 3

您只需在创建元素后调用.bind()。

jquery删除不处理附加项目

3 个答案: