Newly added elements $.each and events

Question

I’ve read many posts already on the $.each and newly added elements + event attachment. Many of the current Questions regarding this topic on StackOverflow don’t seem to work for me. $.on() is normally recommended since it allows us to append new elements and still maintain a single event listener + handler.

In my current code:

1.$(‘input[type="checkbox"]’).on(“change”, function(e){});

//I do a logical if-statement, if(this.checked) else
//With-in the if-statement I run $.each, however, once I have appended new element in this context a new li to the ul, it stops working.

Out of the curiosity has anyone encountered something like this before, and if YES, how have you folks solved this?

Some StackOverflow posts I have already seen:

jQuery $(element).each function doesn't work on newly added elements

jquery: dynamically appending li items to ul then adding click, but click runs through each li

Event binding on dynamically created elements?

`$(document).on(“change”, ‘input[type="checkbox"]’, function(e){ /////});` Also It would be great if you show the code. — Satpal, Jun 03 '15 at 16:36
Why should I attach it to a document? Isn't that global? Of course the most outer of nods on the HTML layout. — John Smith, Jun 03 '15 at 16:38
You have to attach it to the document or a static parent of the appended element. It is called as delegation. — Shaunak D, Jun 03 '15 at 16:41
Satpal, please post your first comment above as an answer. The one with the code-snippet of yours. — John Smith, Jun 03 '15 at 16:42

score 1 · Accepted Answer · answered Jun 03 '15 at 16:42

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.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

As you are creating elements.

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

General Syntax

$(document).on(event, selector, eventHandler);

Ideally you should replace document with closest static container.

Example

$(document).on('change', 'input[type="checkbox"]', function(){
  //Your code
});

Newly added elements $.each and events

1 Answers1