使用jQuery删除动态插入的html

Question

我正在尝试动态创建和删除列表中的项目,它工作得很好...有点,我可以删除项目,并创建项目,但一旦项目已创建,我不能再删除它,但我可以删除页面加载时出现的项目.

这是我的代码

<div class="list">
    <div class="item">
        <input type="text" value="" />
        <a href="" class="removeitem">Remove this item</a>
    </div>
    <div class="item">
        <input type="text" value="" />
        <a href="" class="removeitem">Remove this item</a>
    </div>
    <a href="" class="additem">Add item to list</a>
</div>

<script type="text/javascript">
// Add item to list
$('.additem').click(function(){
    var template = $($(this).prev().get(0)).clone();
    template.insertBefore($(this));
    return false;
});

// Remove item from list
$('.removeitem').click(function(){
    $(this).prev().parent().remove();
    return false;
});
</script>

我可以删除2个原始项目,但是当我创建新项目时,它们无法删除

Answer 1

您需要使用实时事件而不是当前正在使用的正常样式.

点击事件在加载时绑定,此时仅存在要绑定的原始项目.

你会使用这样的直播活动:

<script type="text/javascript">
// Add item to list
$('.additem').click(function(){
    var template = $($(this).prev().get(0)).clone();
    template.insertBefore($(this));
    return false;
});

// Remove item from list
$('.removeitem').live("click", function(){
    $(this).prev().parent().remove();
    return false;
});
</script>

使用实时事件会产生开销(它必须监视DOM中的所有事件并检查它们是否匹配我相信).因此,只在必要时使用它们.