Solve the Problem of binding events after Jquery append new elements to the page

Solve the Problem of binding events after Jquery append new elements to the page

Today, we have a new knowledge point, that is, when we add a new element to the page, the function method before loading will become invalid for the new element. Next I will explain how to solve this problem?

 

I first looked at the jq api documentation and found no method. I had to go online to find some information and found the live method.

It is actually very simple:

1. This is what the project requires. When I do not use live events, I only use simple hover events: the hover events are not loaded, and there is no border effect I want, as shown below:

 

The Code is as follows:

/* Add a style through the user skill tag */
$ (Function (){
$ (". S-edited"). hover (function (){
$ (This). toggleClass ("borderd ");
})
})

 

2. When I use live, the effect is achieved, for example:

The Code is as follows:

 

The Code is as follows:

/* Add a style through the user skill tag */
$ (". S-edited"). live ("hover", function (){
$ (This). toggleClass ("borderd ");
})

 

I carefully read the introduction to live,

Bind an event handler (such as a hover event) to all the current and future matching elements ). You can also bind custom events.

PS: I'm a newbie, so don't try it!

The above is all the content of this article. I hope you will like it.