I'm playing around with event-delegation from / .I have the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="A small web app to manage todos">
<title>TO-DO jQuery Tests</title>
<!--src attribute in the <script> element must point to a copy of jQuery -->
<script type="text/javascript" src=".0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "article" ).on( "click","a", function() {
console.log( "The ID attribute of the link is: " + $(this).attr('id'));
});
//The .append()method inserts the specified content as the last child of each element in the jQuery collection -->
$( "#test-container" ).append("<article> <a href=\"#\"id='link-2'>Link 2</a> </article>" );
});
</script>
</head>
<body>
<div id="test-container">
<article>
<a href="#" id="link-1">Link 1</a>
</article>
</div>
</body>
When I click on Link2 I get no output on the console? Why isn't the event-handling working?
I'm playing around with event-delegation from http://learn.jquery./events/event-delegation/ .I have the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="A small web app to manage todos">
<title>TO-DO jQuery Tests</title>
<!--src attribute in the <script> element must point to a copy of jQuery -->
<script type="text/javascript" src="http://code.jquery./jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$( "article" ).on( "click","a", function() {
console.log( "The ID attribute of the link is: " + $(this).attr('id'));
});
//The .append()method inserts the specified content as the last child of each element in the jQuery collection -->
$( "#test-container" ).append("<article> <a href=\"#\"id='link-2'>Link 2</a> </article>" );
});
</script>
</head>
<body>
<div id="test-container">
<article>
<a href="#" id="link-1">Link 1</a>
</article>
</div>
</body>
When I click on Link2 I get no output on the console? Why isn't the event-handling working?
Share Improve this question asked Dec 17, 2013 at 17:18 John Smithv1John Smithv1 7035 gold badges14 silver badges33 bronze badges 2-
From the
.ondocumentation: "Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to.on()." – Felix Kling Commented Dec 17, 2013 at 17:25 -
It took me so long to realize why it was a problem until I noticed that you're appending new
<article>elements to the div. I thought you were just adding more<a>elements to the existing<article>element. – Travesty3 Commented Dec 17, 2013 at 17:38
2 Answers
Reset to default 8You have to bind to the closest static parent.
This case test-container.
$( "#test-container" ).on( "click","article a", function() {
// your code
});
The problem is that the second link is added dynamically and the click binding happens before the second link exists. That's why it has no affect on it.
Your code should look like this (instead of $(document) you can also use any static parent container as Ricardo pointed out):
$(document).ready(function() {
$(document ).on( "click","article a", function() {
console.log( "The ID attribute of the link is: " + $(this).attr('id'));
});
//The .append()method inserts the specified content as the last child of each element in the jQuery collection -->
$( "#test-container" ).append("<article> <a href=\"#\"id='link-2'>Link 2</a> </article>" );
});