CODEWITHSUNDEEP
jquery
Kevin Pang
Kevin Pang

Reputation: 41442

Handling events of HTML elements inserted by jQuery

I currently have an anchor tag that, when clicked, appends another anchor tag to the DOM. This is all done via jQuery. I know what the "id" attribute of the anchor tag to be added will be. However, when I try the following code, it fails to handle the newly added anchor tag's click event:

$("#id").click(function() { alert("test"); });

Upvotes: 4

Views: 4180

Answers (6)

Steve Meisner
Steve Meisner

Reputation: 756

Use the .on property to attach event handlers on a given tag:

$(document).on("click", "#id" function(){
    // Do something...
});

Upvotes: 0

JakeJ
JakeJ

Reputation: 1381

The problem that you have is that when you have the code $('#Element').click(function(){...});, it will only ever run the code on elements that were present when that code was ran in the first place, if you are using the latest version of jQuery, you should use this code to make it work:

//This makes sure that all the elements are ready to receive jQuery bindings
$(document).ready(function(){

    //The .on function will attach the event to all current
    // elements that match the selector and all future elements
    // that will match the selector
    $(document).on('[EVENT]', '[SELECTOR]', function(){
        //Do Stuff
    });

});

This code along with any other jQuery code that attaches to elements (using the .on() function or not) should all be withing a document.ready as above.

This will run the event (In your case, [EVENT] will be click) for any element now, and in the future that match the [SELECTOR] (In your case, #id)

JSFiddle Example: http://jsfiddle.net/DhWmP/

Source(s): http://api.jquery.com/on/ & Experience with inserting elements on a page that need functions.

Upvotes: 7

redsquare
redsquare

Reputation: 78667

Event Delegation

If you upgrade to the new 1.3 beta they have a live() method that will handle delegated events. If you cant upgrade you can easily roll event delegation yourself. Explained in my response here

Upvotes: 0

Mike Scott
Mike Scott

Reputation: 12463

As the others have said, you can't attach event handlers to elements that don't exist yet. So if your code snippet is in the doc ready, it won't work.

Just put the $("#id").click(function() { alert("test"); }); in the jQuery code that adds the anchor.

Upvotes: 0

Beau Simensen
Beau Simensen

Reputation: 4578

Is it possible that the code you pasted here is being executed before the new DOM node is actually available? If so, you can try using the .ready() method and attach your click after the fact.

$("#id").ready(function() {
    $("#id").click(function() { alert("test"); }
});

EDIT: I am somewhat new to jQuery myself, and I thought that the .ready() method was usable by more than just the document object. If this turns out to not be true, it looks like there is a jQuery plugin, jQuery.Listen, that does something similar:

// Listen to clicks, even for newly added instances of #id.
jQuery.listen( 'click', '#id', function(){ alert("test"); });

Something like this would be nice if you can use classes for your dynamically added anchors.

// Listen to clicks for anything with the class "dynamicAnchors", even newly
// added anchors.
jQuery.listen( 'click', '.dynamicAnchors', function(){ alert("test"); });

Upvotes: 1

Eran Galperin
Eran Galperin

Reputation: 86805

Are you attaching the click event before the element is added to the DOM? in that case it won't work. You need to either attach the event after the element is inserted to the DOM or add a listener that intercepts DOM changes and adds the event after the DOM is updated (similar to what the livequery plug-in does).

Upvotes: 3

Related Questions