CODEWITHSUNDEEP
javascriptjquerydom
Jack
Jack

Reputation: 237

in Javascript Dom ,the newly added element can't be selected?

<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>

And：

$(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();  
}) 
})

when i click Add Option,it works,but when i click the remove of the newly added,it doesn't remove .whether the $(".remove") selector have effects on it?(the initial two remove work).how to make the newly added elements work？

Upvotes: 0

Views: 2089

Answers (3)

Richard Andrew Lee
Richard Andrew Lee

Reputation: 1177

This works: 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();

Upvotes: 0

Rafay
Rafay

Reputation: 31043

try using it with .live()

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

Upvotes: 3

Felix Kling
Felix Kling

Reputation: 816482

At the time you bind the event handler to the .remove elements, the new elements don't exist yet (obviously). That's why jQuery cannot find them and bind the event handler.

You can solve this using .live [docs] or .delegate [docs]:

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

These methods bind the event handler to the document root and inspect every click event (in this case) and test whether the target matches the selector. If it does, the handler is executed.

I also would advise you to not mix plain DOM operations and jQuery like that. Your click event handler can be written in a more concise way:

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

There are exceptions, like accessing properties of DOM elements, but here you really should make use of jQuery.

Upvotes: 2

Related Questions