How does javascript-jQuery bind events to dynamically added elements?

The code block in describes an event. After the event is triggered, html is generated after the tag corresponding to id & quot; tb1 & quot;. The code in the webpage is like this, for example, if 2 is marked as the previous one, and 3 is added through the above event, the problem arises. There is a property of name "plan_bt ,...

The code block in describes an event.id="tb1"Tags generated afterhtml;
The Code on the webpage is like this, for example

Marked2Yes,3Is added through the above event, then the problem arises; there isname=“plan_bt[]”This property is bound to an event. The Code is as follows:

Why does the added html code fail to execute this event? No response is returned when you click the select button? At the beginningreadyUnder, how should I modify it?

Reply content:

The code block in describes an event.id="tb1"Tags generated afterhtml;
The Code on the webpage is like this, for example

Marked2Yes,3Is added through the above event, then the problem arises; there isname=“plan_bt[]”This property is bound to an event. The Code is as follows:

Why does the added html code fail to execute this event? No response is returned when you click the select button? At the beginningreadyUnder, how should I modify it?

If you haven't generated this DOM before binding events, it won't be bound. That is

The binding event only binds the existing DOM.

If you need to bind the DOM to be added in the future, you can use the delegate mode. The event bubble mechanism is used, which is probably implemented using jQuery.

// Find the parent object, which is assumed to be form $ ("form: first "). on ("click", "name = 'Plan _ bt [] '", function (e) {var targets = (e.tar get );//...});

name=“plan_bt[]”This is only available after the page is loaded, so any previous operations on this selector will fail, because this element cannot be found.

AvailableonBind the event Delegate.

$(document).on('click', 'name=“plan_bt[]”', function(){    // your code});

The principle is to bind an event to an existing parent element (not necessarilydocument), Trigger parameter 1clickPass after the eventeventObject To find the real trigger, if this trigger and parameter 2name=“plan_bt[]”If they are consistent, the execution parameter 3function(){}.

Recommended subject searchEvent bubblingFor more information, see jQuery best practices.

Use each and on.

You can try the jquery livequery plug-in.

You can consider using live or delegate.

Event delegation principle