Home > Developer > JavaScript
Deep understanding of jQuery event removal, deep understanding of jquery Removal
Sometimes, when an event is executed, you can solve it in a certain way if you want to cancel the event. For example, the bind () method can be used to remove the effect of an event through the unbind () method.
For example, in the following case:
<Script type = "text/javascript"> $ (function () {$ ('# btn '). bind ("click", function () {$ ('# test '). append ("<p> my binding function 1 </p> ");}). bind ("click", function () {$ ('# test '). append ("<p> my binding function 2 </p> ");}). bind ("click", function () {$ ('# test '). append ("<p> my binding function 3 </p>") ;}) </script>
Html section:
<Body> <button id = "btn"> click me </button> <div id = "test"> </div> </body>
When the button btn is clicked, three click events are triggered. The append () method here transmits the content of three paragraphs to the div layer.
The append () method inserts the specified content at the end of the selected element (still inside. It is different from the html () method. The html () method changes the content of the entire element rather than inserting content at 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 correctly parsed, while the text () method () only when the html code is a normal string.
Every time you click here, an event is executed and you want to add a paragraph at the end of the div layer.
The following code cancels the event effect. You can delete the event to invalidate the click effect:
<Script type = "text/javascript"> $ (function () {$ ('# btn '). bind ("click", function () {$ ('# test '). append ("<p> my binding function 1 </p> ");}). bind ("click", function () {$ ('# test '). append ("<p> my binding function 2 </p> ");}). bind ("click", function () {$ ('# test '). append ("<p> my binding function 3 </p>") ;}); $ ('# delall '). click (function () {$ ('# btn '). unbind ("click") ;}) </script>
$ ('# Btn'). unbind ("click"); this code cancels the click event under Element btn. It is not only effective for the bind () method, but also for the click () method. In a sense, bind ("click", function () {}) and click (function () {}) are equivalent.
You can also delete specific events based on specific methods.
The following code can be referenced:
<Script type = "text/javascript"> $ (function () {$ ('# btn '). bind ("click", myFun1 = function () {$ ('# test '). append ("<p> my binding function 1 </p> ");}). bind ("click", myFun2 = function () {$ ('# test '). append ("<p> my binding function 2 </p> ");}). bind ("click", myFun3 = function () {$ ('# test '). append ("<p> my binding function 3 </p>") ;}); $ ('# deltwo '). click (function () {$ ('# btn '). unbind ("click", myFun2) ;};}) </script>
The second parameter of the unbind () method is the name of the execution function corresponding to the event. After the execution, only the myFun2 event is deleted, and the other two click events are executed normally.
Another method similar to the bind () method is one (). The difference is that the one () method is executed only once.
Bind a one-time event handler function for a specific event (such as click) Matching Element.
The Code is as follows:
<Script type = "text/javascript"> $ (function () {$ ('# btn '). one ("click", function () {$ ('# test '). append ("<p> my binding function 1 </p> ");}). one ("click", function () {$ ('# test '). append ("<p> my binding function 2 </p> ");}). one ("click", function () {$ ('# test '). append ("<p> my binding function 3 </p>") ;}) </script>
Click it and run it only once. Clicking again will not trigger the effect. This is the one method.
The above in-depth understanding of the removal of the jQuery event is all the content shared by the editor. I hope to give you a reference and support for the help house.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
