jQuery to show/hide dynamic elements

Question

I want to hide/show the ul element when I click on the h3 tag. I tried some examples, maybe I am missing something.

My sample code:

$('#gallery').append('<h3 id="' + idx + '" >' + item.title._content + '</h3><ul style="display:none;" class="photos grp' + idx + '"></ul>');

$('h3#'+idx).click(function () {
   $(this).next('.photos.grp'+idx).toggle();
});

Looks like there's some missing code, a loop perhaps? Post everything so we can see how the variables are defined etc+ — adeneo, Aug 06 '14 at 12:25
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — emerson.marini, Aug 06 '14 at 12:27
Using on("click",handler) vs click(handler) makes no difference. click() is a shortcut for on("click",handler). — Curlystraw, Aug 06 '14 at 12:31
possible duplicate of [jQuery form not working when part of ajaxed content](http://stackoverflow.com/questions/25085926/jquery-form-not-working-when-part-of-ajaxed-content) — Ehsan Sajjad, Aug 06 '14 at 12:31
Check my answer, You must use either `on` or `delegate` event — Ashwin Parmar, Aug 06 '14 at 12:33

score 1 · Answer 1 · answered Aug 06 '14 at 12:30

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

.delegate( selector, eventType, handler )

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

You can use jQuery delegate events handler which can be used on your dynamic added elements.

e.g. In your case

$('#gallery').append('<h3 id="' + idx + '" >' + item.title._content + '</h3><ul style="display:none;" class="photos grp' + idx + '"></ul>');

$('h3#'+idx).on('click', function() {
   $(this).next('.photos.grp'+idx).toggle();
});

OR

$('h3#'+idx).delegate('#gallery', 'click', function() {
   $(this).next('.photos.grp'+idx).toggle();
});

Here, #gallery is your Parent element of all child elements.

score 0 · Answer 2 · answered Aug 06 '14 at 12:27

0

Because you are dynamically You should use this

var id = 'h3#'+idx;
$('#gallery').on('click',id,function(){
    $(this).next('.photos.grp'+idx).toggle();
})

answered Aug 06 '14 at 12:27

Mritunjay

25,338
7
55
68

in html add
http://jsbin.com/xerojane/1/edit?html,js,output – Alex Aug 06 '14 at 15:35

score 0 · Answer 3 · answered Aug 06 '14 at 12:27

0

Try this :

$('h3#'+idx).on('click',function () {
       $(this).next('.photos.grp'+idx).toggle();
  });

Because you are appending html from jquery then use `.on()` shown above.

answered Aug 06 '14 at 12:27

Kartikeya Khosla

18,743
8
43
69

maybe i'v something miss in my explanation, please look my code on jsbin, i'v try use on, trigger and a lot of other stuff.. – Alex Aug 06 '14 at 15:55

jQuery to show/hide dynamic elements

3 Answers3