Question

<body>
<div id="options">
        <p class="input">
            <input type="text"/>
            <a class="remove" >Remove</a>
        </p>
        <p class="input">
            <input type="text"/>
            <a class="remove" >Remove</a>
        </p>
</div>
<a href = "#" id ="click" >Add Option</a>
</body>

和

$(function() {
$("#click").click(function add_option(){
    var options = document.getElementById("options");
    var p=document.createElement("p");
    p.setAttribute("class","input");
    var input=document.createElement("input");
    input.setAttribute("type","text")
    options.appendChild(p);
    p.appendChild(input);               
    var a=document.createElement("a");
    a.setAttribute("class","remove");

    var text = document.createTextNode(" Remove");
    a.appendChild(text);
    insertAfter(a,input);//if exist insertAfter
              }
              )

$(".remove").click(function remove_option(){

$(this).parent().remove();  
}) 
})

当我点击Add Option时，它可以正常工作，但是当我点击新添加的remove时，它不会删除。$（“。remove”）选择器是否会对其产生影响？（最初的两个remove工作）。如何使新添加的元素工作？

Answer 1

尝试将其与.live()

一起使用

$(".remove").live("click",function(){    
$(this).parent().remove();  
});

Answer 2

在将事件处理程序绑定到.remove元素时，新元素尚不存在（显然）。这就是jQuery无法找到它们并绑定事件处理程序的原因。

您可以使用.live ^[docs]或.delegate ^[docs]解决此问题：

$(".remove").live('click', function(){
    $(this).parent().remove();  
});

这些方法将事件处理程序绑定到文档根目录并检查每个click事件（在本例中）并测试目标是否与选择器匹配。如果是，则执行处理程序。

我还建议你不要混合普通的DOM操作和jQuery。您的click事件处理程序可以用更简洁的方式编写：

$("#click").click(function(){
    $('<p />', {'class': 'input'})
      .append($('<input />', {type: 'text'})
      .append($('<a />', {'class': 'remove', href: '#', text: 'Remove'})
      .appendTo('#options');
});

有一些例外，比如访问DOM元素的属性，但在这里你真的应该使用jQuery。

Answer 3

这有效：http://jsfiddle.net/UJERQ/

$("#click").click(function add_option(){

    $("#options").append('<p class="input"><input type="text"/><a class="remove" > Remove</a></p>')

    addTheClicks();
})

    function addTheClicks(){
       var btns = $(".remove");
       var btnsLength = btns.length;

        for(i=0;i<btnsLength;i++){
         var hasClickAlready =  $.data(btns.eq(i).get(0), 'events' );
            if(hasClickAlready == null){
                btns.eq(i).click(function(){
                    $(this).parent().remove()
                        })
            }
        }

    }



addTheClicks();

在Javascript Dom中，无法选择新添加的元素？

3 个答案: