jQuery click event, after appending content
67,489
Solution 1
Because the elements that you are appending do not exist when you define the the click
handler, they are created dynamically. To fix this you can use the delegate() method from jQuery.
$('ul').delegate('a','click',function() {
// your code here ...
});
Online example: http://jsfiddle.net/J5QJ9/
Solution 2
$(document).on('click','ul li a', function(){
// Content Code
});
Solution 3
From jQuery 1.7 you can use the .on() handler to bind the newly created element ot the 'click' event:
<script type="text/javascript">
$(document).ready(function() {
$('#load_list').click(function() {
$('ul').append('<li><a href="#">Click here</a></li>').on('click', 'ul li a', function () {
alert('thank you for clicking');
});
});
</script>
(this is with the original example).
Solution 4
.live is deprecated as of 1.7. Try this (jquery 2.1.4):
Html:
<a id="load_list" href="#">Load the list</a>
<ul></ul>
JQuery:
$(document).ready(function() {
$('#load_list').click(function() {
$('ul').html("");
$("<li/>", {
"class" : "someClass",
text: "Click here",
click: function() {
alert($(this).text());
}
}).appendTo('ul');
});
});
or something like this (but I didn't find how to attach click to the anchor):
$(document).ready(function() {
$('#load_list').click(function() {
$('ul').html("");
$('<li><a href="#">Click here</a></li>').on({
click: function() {
alert("hoi");
}
}).appendTo("ul");
});
});
Related videos on Youtube
Comments
-
Pav over 3 years
Wondering why the example below doesn't work?
<a id="load_list" href="#">Load the list</a> <ul></ul> <script type="text/javascript"> $(document).ready(function() { $('#load_list').click(function() { $('ul').append('<li><a href="#">Click here</a></li>'); return false; }); $('ul li a').click(function() { alert('Thank you for clicking'); return false; }); }); </script>
-
alexyorke over 12 years-1. My question was incorrectly downvoted because some of the information provided was incorrect, appearing as though my answer was completely incorrect.
-
Pav over 12 yearsDoesn't take a genius to figure out I've only posted part of the code that wasn't working. Thanks for your input tho.
-
-
amosrivera over 12 yearsAs Bless Yahu says, it is better to use delegate, see nettuts explanation on that: net.tutsplus.com/tutorials/javascript-ajax/…
-
Craig White over 12 yearsThanks for the downvote whoever you are. :/ I gave proper new code with comments.
-
M Lamb over 11 yearsA bit of further information (My apologies for dodgy formatting): Old:
$("#Item1").click(function(e) {
New:$(document).delegate("#Item1", "click", function(e) {
Even Newer:$(document).on("click", "#Item", function(e) {
-
M Lamb over 11 yearsProbably because this has to be the most painful way possible.
-
brixenDK about 9 years
.live
has been removed as of jQuery version 1.9, so.delegate
or.on
is the way to go. -
Imnotapotato over 6 years
.on
didn't work for me although i have jQuery 1.11 -
Achraf Farouky about 2 yearsThank you for your help :)