Jquery On Click Method Not Working for Newly Added Div

Question

I have written some code that on the click of a button adds a new tweet(div) to a list of divs. See shortened code below. Now even though the new div has all the same classes as the other divs. It does not perform when clicked.

How can I get the jquery click method to work for newly added divs?

$('.buttonClass').on('click', function() {

    ....
              $newTweet.insertAfter('button');
    });



$('.douglascalhoun').on('click', function() {
          $("div").slideToggle();
          $("div.douglascalhoun").slideDown();
        });

I like the answer by Milind below, just tried it and it seems to work. — realsimonburns, May 06 '15 at 05:07

score 3 · Answer 1 · answered May 06 '15 at 05:03

3

You need to use event delegation for attaching events to dynamically generated elements:

$('body').on('click', '.douglascalhoun',function() {
      $("div").slideToggle();
      $("div.douglascalhoun").slideDown();
    });

answered May 06 '15 at 05:03

Milind Anantwar

81,290
25
94
125

Thanks Milind! Appreciate it - this works :) – realsimonburns May 06 '15 at 05:07

score 0 · Answer 2 · answered May 06 '15 at 05:11

0

behind the curtains event delegation works as follows for dynamically generated elements

$(staticAncestors).on(eventName, dynamicChild, function() {
  // Your Function
});

answered May 06 '15 at 05:11

Nilesh Mahajan

3,506
21
34

score 0 · Answer 3 · answered May 06 '15 at 05:18

0

Use the below code, when you are performing events when added dynamically.

$(document).on('click', 'selector', function(){
     //from dynamic div
})

answered May 06 '15 at 05:18

stanze

2,456
10
13

Jquery On Click Method Not Working for Newly Added Div

3 Answers3