点击删除追加的Div (JQuery)

Delete appended Div on-click (JQuery)

本文关键字：JQuery Div 删除 追加      更新时间：2023-09-26

我在点击按钮时删除附加div时遇到了一些问题。

当我使用hide()时，我得到了正确的行为，但它实际上并没有删除新的div's，这是我想要的，因为这些数据将被发送到webservice。

JQuery: 

$('a.addListOVM').click(function(e){    
    e.preventDefault();         
    $('.addCardOVM').append('<div class="divform"><label>' + $('.my_select').find(':selected').val() + '</label>' + '<a class="removed" href="">-</a></div>');
    $('.removed').click(function(e){            
        e.preventDefault();
        $(this).closest('.divform').hide();
    });                     
});
模板HTML: 

<div class="divform">
 <select class="my_select" name="vlans_{$NetworkDTO->id}[]">
  {foreach from=$arrNetworkDTO item=NetworkDTO name=arr}
    <option class="addOvmCardList" value="{$NetworkDTO->name|escape}">{$NetworkDTO->name}</option>
  {/foreach}
 </select>
<a href="" class="addListOVM">+</a> 
</div>

按钮本身是动态生成的(见第三行)和点击，我希望它删除特定附加的div而不关闭整个窗口，当我使用.remove()而不是hide()时，它似乎正在做。

那么，谁能告诉我:

  1. 为什么使用remove()而不是hide()关闭我的整个模板窗口，而不是删除单个div，像hide()看起来像它在做。

  2. 为什么，当我创建附加div的多个实例时，.remove点击处理程序会多次调用(如果创建两个实例，删除一个它循环一次，删除第二个它循环两次等)

  3. 我怎么能得到隐藏()的物理功能，而实际删除追加的div?

谢谢

1。为什么使用remove()而不是hide()会关闭整个模板窗口，而不是像hide()那样删除单个div ?

我不知道你说的模板窗口是什么意思，所以我在这里帮不了你。

2。为什么，当我创建附加div的多个实例时，.remove点击处理程序会被调用多次(如果创建两个实例，删除一个它循环一次，删除第二个它循环两次等)

因为每当点击事件处理程序被执行，你创建一个新的div，你绑定一个新的事件处理程序到所有的.removed元素，刚刚创建的一个和所有其他现有的。

3。如何获得hide()的物理功能，同时实际删除附加的div?

也许这与上面的问题有关。使用事件委托对于删除div的事件处理程序:

$('a.addListOVM').click(function(e){    
    e.preventDefault();         
    $('.addCardOVM').append('<div class="divform"><label>' + $('.my_select').find(':selected').val() + '</label>' + '<a class="removed" href="">-</a></div>');                 
});
$('.addCardOVM').on('click', '.removed', function(e){            
    e.preventDefault();
    $(this).closest('.divform').remove();
});

使用jQuery Live函数动态选择添加的HTML 

 $('.removed').live('click',function(e){            
    e.preventDefault();
    $(this).closest('.divform').hide();
});
相关文章：