issue in adding events to dynamically coming elements

Question

doing a accordion, structure is as follows, few divs are coming dynamically, not working.

parent div

<div id="resultarea" class="accordion"> 

</div>

Inside the parent tag the following tags are coming dynamically.

<div class="accordion-item">
    Item 1
<div class="type"></div>
</div>
<div class="data">
   my data related to item 1
</div>
<div class="accordion-item">
    Item 2
<div class="type"></div>
 </div>
<div class="data">
       my data related to item 2
</div>

Below is the javascript

$(function($) {
      var allAccordions = $('.accordion div.data');
      var allAccordionItems = $('.accordion .accordion-item');
      $('.accordion > .accordion-item').click(function() {
        if($(this).hasClass('open'))
        {
          $(this).removeClass('open');
          $(this).next().slideUp("slow");
        }
        else
        {
        allAccordions.slideUp("slow");
        allAccordionItems.removeClass('open');
        $(this).addClass('open');
        $(this).next().slideDown("slow");
        return false;
        }
      });
});

but its not working when the items data is coming dynamically, if static page it is working. please help me to solve this

static one is in jsfiddle find below

http://jsfiddle.net/ea6xX/

score 1 · Answer 1 · answered Jun 09 '14 at 06:27

Try to use event-delegation on dynamically created elements,

$('.accordion').on('click','.accordion > .accordion-item',function() {

Full code:

$('.accordion').on('click','.accordion > .accordion-item',function() { 
  if($(this).hasClass('open'))
   {
     $(this).removeClass('open');
     $(this).next().slideUp("slow");
   }
  else
  {
    allAccordions.slideUp("slow");
    allAccordionItems.removeClass('open');
    $(this).addClass('open');
    $(this).next().slideDown("slow");
    return false;
  }
});

score 0 · Answer 2 · answered Jun 09 '14 at 06:28

Use event delegation - .on() : it binds events to object existing or those which will be added later.

$(document).on('click','.accordion > .accordion-item',function() {
    if($(this).hasClass('open'))
    {
        $(this).removeClass('open');
        $(this).next().slideUp("slow");
    }
    else
    {
        allAccordions.slideUp("slow");
        allAccordionItems.removeClass('open');
        $(this).addClass('open');
        $(this).next().slideDown("slow");
        return false;
    }
});

- You need to include jQuery reference in your fiddle.

score 0 · Answer 3 · answered Jun 09 '14 at 06:28

Because the elements are being appended to the page after DOMReady has fired you need to use a delegated event handler using on(). Try this:

$('#resultarea').on('click', '> .accordion-item', function() {
    var allAccordions = $('.accordion div.data');
    var allAccordionItems = $('.accordion .accordion-item');
    if ($(this).hasClass('open')) {
        // your code...
    }
});

Note that your variable declarations must go inside the click handler, as on page load the items being selected will not exist.

Bhushan Kawadkar · Answer 4 · 2014-06-09T07:19:15.190

0

Use .on as this binds event handler to the selected elements.

For more information click here.

$(function($) {
      var allAccordions = $('.accordion div.data');
      var allAccordionItems = $('.accordion .accordion-item');
      $('.accordion').on("click",".accordion-item",function() {
        if($(this).hasClass('open'))
        {
          $(this).removeClass('open');
          $(this).next().slideUp("slow");
        }
        else
        {
        allAccordions.slideUp("slow");
        allAccordionItems.removeClass('open');
        $(this).addClass('open');
        $(this).next().slideDown("slow");
        return false;
        }
      });
    });

Working JSFiddle

edited Jun 09 '14 at 07:19

answered Jun 09 '14 at 06:29

Bhushan Kawadkar

28,279
5
35
57

That's exactly the same as what the OP has and won't make any difference. – Felix Kling Jun 09 '14 at 06:53
Sorry I forgot to assign target element. Now updated my answer. – Bhushan Kawadkar Jun 09 '14 at 07:19

RGS · Answer 5 · 2014-06-09T06:41:02.303

 $(document).on('click', '.accordion .accordion-item', function(e) {
     if($(this).hasClass('open'))
      {
       $(this).removeClass('open');
       $(this).next().slideUp("slow");
      }
       else
        {
        allAccordions.slideUp("slow");
        allAccordionItems.removeClass('open');
        $(this).addClass('open');
        $(this).next().slideDown("slow");
        return false;
        }
 });

Demo:

http://jsfiddle.net/ea6xX/4/

score -1 · Answer 6 · answered Jun 09 '14 at 06:29

-1

First of all you have to include jQuery in your jsFiddle example. As for dynamic data, you could try to use jQuery on for click event binding.

$('.accordion > .accordion-item').on('click', function() {
     ...
});

Fixed jsFiddle example

answered Jun 09 '14 at 06:29

N3m1s

139
1
3

That's exactly the same as what the OP has and won't make any difference. – Felix Kling Jun 09 '14 at 06:52
I mean that `$(...).click(...)` and `$(...).on('click', ...)` are equivalent. In fact, `.click()` calls `.on()` internally. – Felix Kling Jun 09 '14 at 14:44

issue in adding events to dynamically coming elements

6 Answers6