Click event after prependto?

Question

Im having a brain fart at the moment, most likely due to being late at night. Any who, I have content that is prepended to the document after an ajax call. I am trying to assign a click event to these elements that are being prepended but it is not firing. Recreating the elements in static html fine.

Jquery

$('.row').click(function() {
    $(this).children('.slide2').stop().slideToggle(200);
})


$('<div class="row"><div class="main"><div class="split6">'
                         + data.some + '</div><div class="split6">' 
                         + data.some + '</div><div class="split6">' 
                         + data.some + '</div><div class="split6">'
                         + data.some + '</div><div class="split6">'
                         + data.some + '</div><div class="split6">'
                         + data.some + '</div></div><div class="slide2"><span>Info: '
                         + data.some + '</span><span>Info: '
                         + data.some + '</span><span>Info: '
                         + data.some + '</span></div></div>').prependTo('#results').hide().slideDown(500);

score 1 · Accepted Answer · answered Mar 07 '14 at 07:48

Use

$('#results').on('click','.row', function() {
    $(this).children('.slide2').stop().slideToggle(200);
})

You need to use Event Delegation for dynamically create elemnts. You have to use .on() using delegated-events approach.

i.e.

$(document).on('event', 'selector', callback_function)

The delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.

Thanks! totally slipped my mind. – Ray Mar 07 '14 at 07:51 — Ray, Mar 07 '14 at 07:51
@Ray, It happens with all of us. Glad I could help :) – Satpal Mar 07 '14 at 08:02 — Satpal, Mar 07 '14 at 08:02

score 0 · Answer 2 · answered Mar 07 '14 at 07:48

You need to use event delegation since your .row has been added dynamically here:

$('body').on('click','.row', function() {
    $(this).children('.slide2').stop().slideToggle(200);
})

Event delegation will helps you to attach the click event to these newly created .row elements.

Anoop Joshi P · Answer 3 · 2014-03-07T07:58:22.783

0

you should use delegate for that

$(document).on("click",".row",function(){
   $(this).children('.slide2').stop().slideToggle(200);
});

It helps you to attach handlers for the future elements

edited Mar 07 '14 at 07:58

answered Mar 07 '14 at 07:49

Anoop Joshi P

25,373
8
32
53

1

Your answer uses `on`, why do you link to `delegate`? – Barmar Mar 07 '14 at 07:57
@Barmar sorry my mistake. I've edited the answer – Anoop Joshi P Mar 07 '14 at 07:58

Click event after prependto?

3 Answers3