What should you pay attention to when using on to bind events in jQuery?

With the update of the jQuery version, the Bind(), live(), and delegate() events of previous versions can be directly replaced by on. This note only takes the click event as an example, and mainly examines the usage of the on event: This article It mainly introduces the matters that need to be paid attention to when using on to bind events in jQuery, which has a good reference value. Let's take a look with the editor below, I hope it can help everyone.

1. Use on to monitor the DOM added before the click event, which can be triggered normally:

2. Use The DOM added after on monitors the click event cannot be triggered normally:

3. Solution: Use event delegation. It should be noted that the delegated object must already exist in the DOM or be added dynamically before the event. At this time, the event can be triggered normally after using on to listen. Otherwise, as in: Step 4:

4. The delegate object is added after the event and the click event cannot be triggered

5. Description: At work, the most commonly used on events are event binding and event delegation. At least I encounter them more often. The main usage of live event on is that the previous jQuery object becomes a document, such as: $(document).on(), Therefore no other examples will be given.

Related recommendations:

Solution to the invalid id binding event in jquery appaend element

Detailed explanation of the problem of JQuery binding events in a loop

Javascript uses event attributes to bind event functions. Detailed explanation of usage

The above is the detailed content of What should you pay attention to when using on to bind events in jQuery?. For more information, please follow other related articles on the PHP Chinese website!