使用jQuery删除DOM元素不起作用 [英] Removing a DOM element using jQuery not working

问题描述

我会直截了当地说，我使用jQuery克隆一个div元素，其中包含一个div元素，我已经绑定了一个click事件，当触发时从DOM删除刚克隆的部分，现在第一部分工作正常，但出于某种原因，它不会删除克隆的部分，这是我的代码，

HTML：

 < div id ='wrapper'> 
< div id =mail> 
< div class =containerid =email> 
< label for =email_address>电子邮件地址：< / label> 
< div> 
< input type =textname =email_addressid =email_address/> 
< span class =remove>< / span> 
< / div> 
< / div> 
< / div> 
< div class =container> 
< input type =buttonid =buttonname =buttonvalue =click me/> 
< / div> 
< / div> 
  

jQuery：

 < code $ $（document）.ready（function（）{
 
 $（span.remove）。click（function（）{
 $（this）.parents（ div.container）。remove（）; 
}）; 
 
 
 var count = 0; 
 
 $（'＃button'） .attr（'disabled'，''）; 
 $（'＃button'）。click（function（）{
 count ++; 
 alert（count）; 
 var test ='（'＃email.container'）。clone（）。attr（'id'，'email_'+ count）.appendTo（'＃mail'）; 
 test.children（'：nth-​​child 2）'）。children（'：first'）。attr（'id'，'mail_'+ count）; 
 
 if（count == 3）{
 $（'＃'按钮'）。attr（'disabled'，'disabled'）; 
} 
 
}）; 
}）; 
  

我可能错过了一些小事，但我似乎无法找到问题。 p>

另外，我一直在试图找到克隆这些部分的更好方法，并且在重命名它们时更好地遍历子元素，这似乎有点凌乱在这一刻，有什么想法吗？

提前做好！

解决方案

<问题是因为 @pharalia陈述。
$ b

解决方案是使用 .live 绑定您的处理程序：

  $（span.remove）。live（'click'，function（）{
 $（this）.parents（div.container ）.remove（）; 
}）; 
  

I'll get straight to the point, I am using jQuery to clone a div element, which has a span within it to which I have binded a click event that when triggered removes the just cloned section from the DOM, now the first section works ok, but for some reason it won't remove the cloned sections once they are created, here is my code,

HTML:

<div id='wrapper'>
<div id="mail">
<div class="container" id="email">
    <label for="email_address">Email address: </label>
    <div>
        <input type="text" name="email_address" id="email_address"  />
        <span class="remove"></span>
    </div>
</div>
</div>
<div class="container">
    <input type="button" id="button" name="button" value="click me" />
</div>
</div>

jQuery:

$(document).ready(function() {

        $("span.remove").click(function(){
            $(this).parents("div.container").remove();
        });


        var count = 0;

        $('#button').attr('disabled','');
        $('#button').click(function(){
            count++;
            alert(count);
            var test = $('#email.container').clone().attr('id', 'email_' + count).appendTo('#mail');
            test.children(':nth-child(2)').children(':first').attr('id', 'mail_' + count);

            if(count == 3){
                $('#button').attr('disabled','disabled');
            }

        });
});

I'm probably missing something small, but I can't seem to find the problem.

Also, I've been trying to find a better way of cloning the sections, and a better way of traversing the child elements when I rename them, it seems a little messy at the moment, any ideas on that?

Thanx in advance!

解决方案

The problem is as @pharalia stated.

A solution is to use .live to bind your handlers:

    $("span.remove").live('click', function(){
        $(this).parents("div.container").remove();
    });

这篇关于使用jQuery删除DOM元素不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！