jQuery click not working for dynamically created items

Question

I have a piece of jQuery that loops through each element in a given div( #container) and does a javascript alert each time a span is clicked. This works fine if the <span>'s are static.

However, if I use a piece of code like:

$(someLink).click(function(){
   $("#container").html( <new html with new spans> )
});

The jQuery code doesn't fire off. Oddly enough though

My question is : Is there a reason my Click events don't work for dynamically created items? I assume I will have to add something into my document ready or heartbeat-script (which is fired every 100 miliseconds) to hook up the events??

score 163 · Accepted Answer · edited Dec 14 '22 at 06:03

163

Do this:

 $( '#wrapper' ).on( 'click', 'a', function () { ... })

 $( 'body'     ).on( 'click', '.your_dynamic_elem_css_selector', function () { ... })  # use body as wrapper static elem

where #wrapper is a static element in which you add the dynamic links.

So, you have a wrapper which is hard-coded into the HTML source code:

<div id="wrapper"></div>

and you fill it with dynamic content. The idea is to delegate the events to that wrapper, instead of binding handlers directly on the dynamic elements.

Btw, I recommend Backbone.js - it gives structure to this process:

var YourThing = Backbone.View.extend({

    // the static wrapper (the root for event delegation)
    el: $( '#wrapper' ),

    // event bindings are defined here 
    events: {
        'click a': 'anchorClicked'
    },

    // your DOM event handlers
    anchorClicked: function () {
        // handle click event 
    }

});

new YourThing; // initializing your thing

edited Dec 14 '22 at 06:03

Nam G VU

33,193
69
233
372

answered Feb 28 '12 at 15:03

Šime Vidas

182,163
62
281
385

1

why .on and not .live or .delegate? – dynamic Feb 28 '12 at 15:14
9

@yes123 Well, because `.live` and `.delegate` have been superseded by `.on`. The `.on` method provides *all* functionality for binding events, no other methods are needed anymore. – Šime Vidas Feb 28 '12 at 15:16
Once again, a feature I didn't know about! Thanks. I will also look into backbone.js for my next project! – JustAnotherDeveloper Feb 28 '12 at 15:23
yes I meant, why they deprecated .live. Why .on is better? Maybe because .on unify .live and .delegate – dynamic Feb 28 '12 at 16:43
1

@yes123 Yes, that's the reason. `.on` unifies `.bind`, `.live`, and `.delegate`. Unification enables simpler, more terse code. – Šime Vidas Feb 28 '12 at 16:54
how it possible using trigger – Sarath Babu Nuthimadugu Nov 25 '13 at 07:58
Had no idea there was an optional parameter for a subselector. Just saved me a few hours this year. – Dylan Valade Dec 05 '13 at 21:27
first one work! but what is the actual reason why earlier it was not working!? – Jay Patel Jul 16 '18 at 13:06

score 91 · Answer 2 · edited Oct 11 '20 at 10:01

source: this post

if you created your elements dynamically(using javascript), then this code doesn't work. Because, .click() will attach events to elements that already exists. As you are dynamically creating your elements using javascript, it doesn't work.

For this you have to use some other functions which works on dynamically created elements. This can be done in different ways..

Earlier we have .live() function

$('selector').live('click', function()
{
//your code
});

but .live() is deprecated.This can be replaced by other functions.

Delegate():

Using delegate() function you can click on dynamically generated HTML elements.

Example:

$(document).delegate('selector', 'click', function()
{
 //your code
});

EDIT: The delegate() method was deprecated in version 3.0. Use the on() method instead.

ON():

Using on() function you can click on dynamically generated HTML elements.

Example:

$(document).on('click', 'selector', function()
{
// your code
});

score 8 · Answer 3 · answered Feb 28 '12 at 15:06

Try something like

$("#container").on('click', 'someLinkSelector', function(){ $("#container").html( <new html with new spans> ) });

You basically need to attach your events from a non-dynamic part of the DOM so it can watch for dynamically-created elements.

score 6 · Answer 4 · answered Jun 21 '14 at 04:39

6

You have to add click event to an exist element. You can not add event to dom elements dynamic created. I you want to add event to them, you should bind event to an existed element using ".on".

$('p').on('click','selector_you_dynamic_created',function(){...});

.delegate should work,too.

answered Jun 21 '14 at 04:39

rocLv

548
6
15

This is a great answer to explain what the real issue is. The other answers give the solution, but this explains why it works. Good job @rocLv ! My issue is that I'm adding elements to a dom element, but they aren't getting bound with the event for some reason. I wonder if I can set the on click event as I create the elements. – Urasquirrel Sep 10 '20 at 23:14
What exactly is `selector_you_dynamic_created` is it a class, an id? – warmwhisky Mar 30 '21 at 17:19

score 4 · Answer 5 · answered Feb 28 '12 at 15:04

4

$("#container").delegate("span", "click", function (){
    alert(11);
});

answered Feb 28 '12 at 15:04

elrado

4,960
1
17
15

It used to be the right way to do it, do not know if it is any different now (did not use jQuery for some time now). – elrado Feb 07 '18 at 08:12

score 2 · Answer 6 · edited Feb 29 '12 at 14:29

2

Using .click will only attach events to elements that already exist.

You need to use a function which monitors for dynamically created events - in older versions of JQuery this was .live(), but this has been superceded by .on()

edited Feb 29 '12 at 14:29

Brian Mains

50,520
35
148
257

answered Feb 28 '12 at 15:03

BonyT

10,750
5
31
52

score 1 · Answer 7 · answered Mar 10 '14 at 13:01

I faced this problem a few days ago - the solution for me was to use .bind() to bind the required function to the dynamically created link.

var catLink = $('<a href="#" id="' + i + '" class="lnkCat">' + category.category + '</a>');
catLink.bind("click", function(){
 $.categories.getSubCategories(this);
});

getSubCategories : function(obj) {
 //do something
}

I hope this helps.

score 0 · Answer 8 · answered Feb 28 '12 at 15:03

0

Use the new jQuery on function in 1.7.1 -

http://api.jquery.com/on/

answered Feb 28 '12 at 15:03

Chris Dixon

9,147
5
36
68

jQuery click not working for dynamically created items

8 Answers8

Linked

Related