Menu
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.test 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?
280
The fix is easy enough, simply bind the OnClick event to the parent of the elements you want to be able to click on. That way, if the element you want to click on is removed and re-appended, the handler will still be there listening as the parent was never removed.
First Simple Way. You also know that in HTML <body> tag holds the actual content that is used to display to the users. Using the onload with HTML <body> tag, you can execute the javascript function after the whole page is loaded. The onload event occurs whenever the element has finished loading.
If you want an event to work on your page, you should call it inside the $(document). ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.
You can use the live() method to bind elements (even newly created ones) to events and handlers, like the onclick event.
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:
$(function(){
$("div.test").click(function(e){
if( $(e.target).is("a") ) {
alert("click");
return false;
});
});
});$(document.createElement("a"))
.attr("href","#")
.text("Test Link 2")
.click(function(){ alert("click"); })
.appendTo("div.test");If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
