Event stops working after dynamic ul li changes

Question

The Code:

if($('.info-dropdown').length){
        setTimeout(function(){
            $('li').has('input[type="checkbox"]').on('click', function(){
                $(this).find('.brand-checkbox').parent().toggleClass('active');
            });
        }, 10); 
    }

The Problem: This code detects event click on element checkbox. After dynamically changing this ul li the event stops working.

Note: These checkboxes are from bootstrap dropdown menu.

Why do you need to wait 0.01 seconds before adding a click handler? Are you waiting for something to [load](https://api.jquery.com/load-event/)? — Dan Ross, Jun 22 '15 at 17:31
What are these dynamic changes you are referring to? Is it possible that the element that you applied the click handler has been removed from the DOM? — Dan Ross, Jun 22 '15 at 17:34

score 2 · Answer 1 · edited May 23 '17 at 12:29

2

Event handlers added directly to an object are added only to that specific DOM object. If you then add or replace more DOM objects, those DOM object won't have any of these event handlers on them. You will have to either manually add the event handlers after you create or replace the DOM objects or you will have to switch to using delegated event handling.

Delegated event handling attaches the event handler to a common parent object (that is not replaced) and uses the fact that many events bubble up the parent chain in order to process the event from the common parent. This allows you to freely create or replace child elements, but still have one event handler that works for all child objects.

You can read a lot more about how to do delegated event handling in these other answers:

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

JQuery Event Handlers - What's the "Best" method

As illustrated in those referenced answers, the general idea is like this:

$("#staticParentSelector").on("click", ".selectorForDynamicChildren", function(e) {
    // event handler code here
});

edited May 23 '17 at 12:29

Community

1
1

answered Jun 22 '15 at 17:28

jfriend00

683,504
96
985
979

I tried also `on` method. It does not work for me. I tried: `$('li input[type="checkbox"]').on( "click", function() {...` – Djavad Jun 22 '15 at 17:31
1

@Djavad - you will have to be a lot more specific about what you tried and what didn't work because delegated event handling (done properly with `.on()` works very well for dynamically created elements). It is the usual solution to event handlers for dynammically created elements. The other answers I've referenced in my answer explain how to do it properly. – jfriend00 Jun 22 '15 at 17:32
@Djavad `It does not work for me` doesn't really help to get what you are doing wrong. Be more specific! – A. Wolff Jun 22 '15 at 17:33
@Djavad - please read the above referenced posts. You are not using the proper form of `.on()` for delegated event handling. That is the static form. You must use the dynamic form. – jfriend00 Jun 22 '15 at 17:35

score 2 · Accepted Answer · edited Jun 22 '15 at 17:32

2

To bind event for dynamic HTML, You can follow below code :

$('containerSelector').on('eventName', 'mainElementSelector'  function(e){

});

Realtime example

$("ul").on("click", "li:has(:checkbox)", function(){

});

edited Jun 22 '15 at 17:32

A. Wolff

74,033
9
94
155

answered Jun 22 '15 at 17:31

Ankush Jain

5,654
4
32
57

Event stops working after dynamic ul li changes

2 Answers2