jquery - jquery remove 不适用于附加项目

Question

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

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

http://jsfiddle.net/9mkmE/

<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 示例

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

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

从上的文档.on()：

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

Answer 2

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

Answer 3

您正在尝试访问文档上准备好的元素，甚至在它创建之前。您需要绑定到页面加载时已经存在的元素。将您的 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;
    });
});