in Javascript Dom ,the newly added element can't be selected?
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>
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？
3 answers
solution1
3 ACCPTED 2011-10-17 06:26:11
try using it with .live()
$(".remove").live("click",function(){
$(this).parent().remove();
});
solution2
2 2011-10-17 06:24:56
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.
solution3
0 2011-10-17 06:45:33
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();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.