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

您需要使用live events而不是目前使用的正常样式。

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

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

<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中的所有事件并检查它们是否匹配我相信）。因此，只在必要时使用它们。

Answer 2

变化：

$('.removeitem').click(function(){
    $(this).prev().parent().remove();
    return false;
});

为：

$('.removeitem').live("click", function(){
    $(this).prev().parent().remove();
    return false;
});

Answer 3

这有用吗？

$('.removeitem').live("click", function(){
$(this).parent('div.item').remove();
return false;
});

其他使用.live（）是个好主意，正如您已经知道的那样。

Answer 4

直播活动的另一个选项是将点击事件附加到您的模板：

$('.additem').click(function(){
   var template = $($(this).prev().get(0)).clone();
   template.insertBefore($(this));
   $(template).click( function() { 
      $(this).prev().parent().remove();
      return false;
   };
   return false;
});

这样你就不会处理直播事件的开销。如果您选择这样做，您可能希望将删除代码拉入函数，例如：

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

使用jQuery删除动态插入的html

4 个答案: