Binding events (bind()) and removing events (unbind()) in JQuery_jquery

Sometimes after the event is executed, if you want to cancel the effect of the event, you can handle it through certain methods. For example, the bind() (binding event) and unbind() (removing events added through the bind() method) methods are used to remove the effects of events.

For example, the following case:

Copy code The code is as follows:

html part:

Copy code The code is as follows:

Click Me

When the button btn is clicked, three click events are triggered. The append() method here passes the content of three paragraphs to the div layer.

The append() method appends the specified content to the end of the selected element (still internally). It is still different from the html() method. The html() method changes the content of the entire element rather than appending content to the end of the element. The text() method is similar to the html() method, but the difference is that the html code can be written in the html() method and can be parsed correctly, while text() can only treat the html code as a normal string.

Every time you click here, an event will be executed to add a paragraph to the end of the div layer. The following code cancels the event effect. You can delete the event to invalidate the click effect:

Copy code The code is as follows:

              $('#btn').unbind("click"); The function of this code is to cancel the click event under the element btn. It is not only valid for the bind() method, it is also valid for the click() method. From a certain perspective, bind("click",function(){}) and click(function(){}) are equivalent.

You can also delete specific events for specific methods. You can refer to the following code:

Copy code The code is as follows:

The second parameter of the unbind() method is the name of the execution function corresponding to the event. After execution, only the myFun2 event is deleted, and the other two click events are executed normally.

There is also a method one() that is similar to the bind() method. The difference is that the one() method is only executed once. Bind a one-time event handler to a specific event (like click) for each matched element. The code is as follows:

Copy code The code is as follows:



Only executed once after clicking. Clicking again will not trigger the effect. This is the one method.

The above is the entire content of this article. I hope this article can help everyone better understand jQuery’s binding events and removal events,