jQuery - Attach click event inside each function for dynamically added content

Question

I have come across a little problem and can't seem to be able to make it work.

I have this as markup.

    <div id="label-group" class="label-group">
        <!-- Label Item -->
        <div id="label-1" class="label-item">
            <div class="label-line">
                <a href="#" class="btn btn-small btn-simple btn-assign-schedule">Assign Schedule to Label</a>
            </div>
            <div class="label-head clearfix"> 
                <div class="label-title">  
                    UK Call Menus 
                </div> 
                <div class="label-tools"> 
                    <a href="#" class="delete" title="Delete Label"></a>
                    <a href="#" class="moveup" title="Move Up"></a>
                    <a href="#" class="movedown" title="Move Down"></a>
                    <a href="#"  class="toggle" title="Open &amp; Close"></a> 
                </div>
            </div>
       </div>
   </div>

And this jQuery that takes all the label-tools links and adds certain functionalities on click.

$(".label-group .label-tools a").each(function(){  
    $(this).on('click',function(e) {
        e.preventDefault(); 
        var li = $(this).closest(".label-item");

        if ($(this).hasClass('movedown')) {
                    li.css('opacity','0.5');
                    li.next().css('opacity','0.5');  
                    li.insertAfter(li.next()).animate({opacity:"1"},200); 
                    li.prev().animate({opacity:"1"},300);
        } else if ($(this).hasClass('moveup')) {
                    li.css('opacity','0.5');
                    li.prev().css('opacity','0.5');
                    li.insertBefore(li.prev()).animate({opacity:"1"},200);  
                    li.next().animate({opacity:"1"},300);
        } else if ($(this).hasClass('toggle')) {
                var liContent = $(this).closest(".label-head").siblings('.label-content');
                    liContent.toggle(0,function(){
                        li.toggleClass('label-open');  
                    });   
        } else if ($(this).hasClass('delete')) {
                    li.remove();   
        }
    })
})

When I add another .label-item to .label-group dynamically the label-tool links don't work at all.

Learn Event Delegation

Satpal
– Satpal

2015-09-15 11:56:57 +00:00
Commented Sep 15, 2015 at 11:56 — Satpal
– Satpal, Commented Sep 15, 2015 at 11:56

Satpal · Accepted Answer · 2015-09-15 11:58:38Z

Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.

You need to use Event Delegation using .on() delegated-events approach, when generating elements dynamically or manipulation selector (like removing and adding classes).

i.e.

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

Example

$(staticParentContainer).on('click',".label-group .label-tools a",function(e) {
    //Your existing code
});

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.

Collectives™ on Stack Overflow

jQuery - Attach click event inside each function for dynamically added content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related