jquery 1.7 click event after append not working

Question

I'm playing around with event-delegation from http://learn.jquery.com/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.com/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?

From the .on documentation: "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
– 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
– Travesty3, Commented Dec 17, 2013 at 17:38

Ricardo Lohmann · Accepted Answer · 2013-12-17 17:20:10Z

8

You have to bind to the closest static parent.
This case test-container.

$( "#test-container" ).on( "click","article a", function() {
    // your code
});

answered Dec 17, 2013 at 17:20

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

epascarello Over a year ago

Would be better as "article a" not just "a"

damian · Accepted Answer · 2013-12-17 17:20:08Z

2

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>" );
});

answered Dec 17, 2013 at 17:20

damian

5,4845 gold badges37 silver badges64 bronze badges

1 Comment

epascarello Over a year ago

It better would be to swap "#test-container" and document in the click line.

Collectives™ on Stack Overflow

jquery 1.7 click event after append not working

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related