ansaurus

Question

JQuery elements ignoring click() code if added to DOM after pageload

Answer 1

A:

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"&gt;&lt;/script&gt;
    </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>

Agent_9191 2009-10-15 19:24:34

That will only work in the same manner assuming there are no other links anywhere on the page, thought it would be fairly obvious that I dumbed down an example...

Andrew G. Johnson 2009-10-15 19:44:29

So narrow your selector. It will only apply to any link that is added within your <div class="test">.

Agent_9191 2009-10-15 19:51:12

I'm not trying to duplicate a link, I am trying to create a new one from scratch hence I'd like my code to reflect this

Andrew G. Johnson 2009-10-15 19:55:50

Just edited it. Realized where it was wrong.

Agent_9191 2009-10-15 20:24:39

the idea behind `.live()` is that it adds an event listener to the document which never changes, and with event delegation it fires only if the selector chosen is clicked or any other event specified

adardesign 2009-10-15 21:10:08

Answer 2

+3 A:

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

});

TStamper 2009-10-15 19:25:33

If your using jQuery 1.2.6 or older you can still have the same functionality by using a plug-in called liveQuery http://docs.jquery.com/Plugins/livequery

adardesign 2009-10-15 21:14:54

Answer 3

+1 A:

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

Sixten Otto 2009-10-15 20:48:40

Accepted since I think you cover all my options

Andrew G. Johnson 2009-10-16 14:35:27

ansaurus

tags:

views:

answers:

JQuery elements ignoring click() code if added to DOM after pageload

related questions