删除附加的Div on-click(JQuery)

时间:2013-01-09 16:34:55

标签: javascript jquery html string jquery-selectors

我在点击按钮时删除附加的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()

所以,有谁能告诉我:

  1. 为什么使用remove()而不是hide()会关闭我的整个模板窗口,而不是删除那个单独的div,就像hide()LOOKS一样。

  2. 为什么,当我创建了附加div的多个实例时,.removed单击处理程序被多次调用(如果你创建了两个实例,删除一个循环一次,删除第二个循环通过两次等)

  3. 如何在实际删除附加的div时获取hide()的物理功能?

  4. 由于

2 个答案:

答案 0 :(得分:4)

  

1。为什么使用remove()而不是hide()会关闭我的整个模板窗口而不是删除那个单独的div,比如hide()LOOKS就像它正在做的那样。

我不知道模板窗口的含义,所以我在这里无法提供帮助。

  

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

因为无论何时执行click事件处理程序并创建新的div,都会将新的事件处理程序绑定到所有.removed元素,刚创建的元素和所有其他元素。

  

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

可能与上述问题有关。将event delegation用于删除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();
});    

答案 1 :(得分:0)

使用jQuery Live功能选择动态添加的HTML。

 $('.removed').live('click',function(e){            
    e.preventDefault();
    $(this).closest('.divform').hide();
});