JQuery elements ignoring click() code if added to DOM after pageload
So I have some code and I add an element to the DOM after pageload (the second link in the below example) however this newly added element ignores all functions defined for it. So for the example below I want all links in div's with the test class to show an alert. Works fine for the link hard coded but the one added afterwards ignores it.
<html>
<head>
<title>SO Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div class="test">
<a href="#" title="Test">Test Link</a>
</div>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("div.tes开发者_高级运维t a").click(function() {
alert("click");
return false;
});
$(document.createElement("a")).attr("href","#").text("Test Link 2").appendTo("div.test");
});
-->
</script>
</body>
</html>
EDIT: Is the only solution to abstract it away with a jQuery plugin?
Your issue is that click() binds an event listener to each element in the current matched set. It's not magic, and it won't retroactively apply the event listener to new content you add to the DOM. Your options are:
- Use the live events functionality in jQuery, as others have mentioned.
- Do something similar yourself, by binding a click handler to some common ancestor of the elements in which you're interested, and then testing the target of each click you see to determine whether you care about it. For example:
$(function(){ $("div.test").click(function(e){ if( $(e.target).is("a") ) { alert("click"); return false; }); }); }); - In the code that adds the new elements to the DOM, also bind event handlers to them. For example:
$(document.createElement("a")) .attr("href","#") .text("Test Link 2") .click(function(){ alert("click"); }) .appendTo("div.test");
IF you use jquery live that will take care of that problem. jquery live Binds a handler to an event (like click) for all current and future matched element.
$("div.test a").live("click", function(){ //change to this
});
Your code can be cleaned up and act like you're hoping like this:
<html>
<head>
<title>SO Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div class="test">
<a href="#" title="Test">Test Link</a>
</div>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("div.test a").live('click', function() {
alert("click");
return false;
});
$('<a href="#">Test Link 2</a>').appendTo("div.test");
});
-->
</script>
</body>
</html>
Note: live is not available on jQuery 1.9
加载中,请稍侯......
精彩评论