[英]Delete appended Div on-click (JQuery)
我在点击按钮时删除附加的div时遇到了一些问题。
当我使用hide()时,我在美学上得到了正确的行为但它实际上并没有删除我想要的新div,因为这些数据将被发送到web服务。
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>
按钮本身是动态生成的(请参阅第3行)并单击,我希望它删除特定的附加div而不关闭整个窗口,当我使用.remove()
而不是hide()
时它似乎正在做。
那么,谁能告诉我:
为什么使用remove()而不是hide()会关闭我的整个模板窗口而不是删除那个单独的div,比如hide()LOOKS就像它正在做的那样。
为什么,当我创建了附加div的多个实例时,多次调用.removed单击处理程序(如果创建两个实例,则删除一个循环一次,删除第二个循环两次等)
如何在实际删除附加的div时获得hide()的物理功能?
谢谢
1.为什么使用remove()而不是hide()会关闭我的整个模板窗口而不是删除那个单独的div,比如hide()LOOKS就像它正在做的那样。
我不知道你的模板窗口是什么意思,所以我在这里无法提供帮助。
2.为什么,当我创建了附加div的多个实例时,.removed单击处理程序被多次调用(如果你创建两个实例,删除一个循环一次,删除第二个循环两次等)
因为无论何时执行click事件处理程序并创建新div
,都会将新事件处理程序绑定到所有.removed
元素,刚刚创建的元素和所有其他现有元素。
3.如何在实际删除附加的div时获得hide()的物理功能?
也许它与上面的问题有关。 将事件委托用于删除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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.