Question

我只是想创建一个函数，允许我使用jQuery .prepend()添加包含内容的div，然后在单击该div时使用.remove()删除它。

前置似乎工作正常，但我无法让.remove()处理前置div。它适用于已存在的div。

任何人都可以帮助我解决我的错误吗？

这是我的代码：

<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $(".DivAdd").click(function(){
        var thisDivItem = $(this).attr('add');thisDivItemid = "DivItem"+$(this).attr('add');
        $( ".DivItem" ).parent().prepend( "<div id='"+thisDivItemid+"' class='DivRemove')>"+thisDivItem+"</div> " );
    });
    $(".DivRemove").click(function(){ $( this ).remove() });
});
</script>

<div class="DivAdd" add="321">Div Add</div>
<div class="DivItems">
    <div class="DivItem DivRemove" id="DivItem1">1</div>
    <div class="DivItem DivRemove" id="DivItem2">2</div>
    <div class="DivItem DivRemove" id="DivItem3">3</div>
    <div class="DivItem DivRemove" id="DivItem4">4</div>
    <div class="DivItem DivRemove" id="DivItem5">5</div>
    <div class="DivItem DivRemove" id="DivItem6">6</div>
    <div class="DivItem DivRemove" id="DivItem7">7</div>
</div>

Answer 1

尝试使用：

$(".DivItems").on('click', '.DivRemove', function(){ $( this ).remove() });

正如其他人所提到的，.on()指的是event delegation的概念。

Answer 2

您需要委派您的事件处理程序。这是因为元素是动态添加的，而不是在jQuery初始化时的DOM中。所以它就像jQuery不了解这个对象一样。您可以将事件处理程序委派给页面加载时将存在的内容。例如，如果你附加的div在包装div中：


  $('.wrapper').on('click',".DivRemove", function() {
    //do stuff
  });

Answer 3

这是delegate()：

的原则

根据特定的root集合，为现在或将来与选择器匹配的所有元素的一个或多个事件附加处理程序元件。

$('.DivItems').delegate('.DivRemove', 'click', function(){ 
    $( this ).remove() });
});

或者您可以使用on()，这是首选：

$('.DivItems').on('click', '.DivRemove', function(){ 
    $( this ).remove() });
});

委托事件的优势在于，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序。

Answer 4

这将满足您的需求。这将绑定到添加到dom的现有和动态元素。

$(document).on('click','.DivRemove',function(){ $( this ).remove() });

使用.prepend（）后jQuery .remove（）无法正常工作

4 个答案: