Home > Article > Web Front-end > Take you to understand the binding event (bind()) and removal event (unbind()) in JQuery

Take you to understand the binding event (bind()) and removal event (unbind()) in JQuery

巴扎黑Original: 2017-06-25 14:50:571825browse

This article mainly introduces the usage and example sharing of jQuery's binding event and removal event. It is recommended here for reference by friends in need.

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, bind() (binding events) and unbind() (removing events added through bind() method) methods to remove the effects of events.

For example, the following case:

The code is as follows:

<script type="text/
javascript
">
    $(function(){
       $(&#39;#btn&#39;).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
    })
</script>

html part:

The code is as follows:

<body>
    <button id="btn">Click Me</button>
    <p id="test"></p>
</body>

When the button is clicked btn, three click events are triggered, and the append() method here passes the content of three paragraphs to the p 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 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, and you want to add a paragraph at the end of the p layer. The following code cancels the event effect. You can delete the event through to invalidate the click effect:

The code is as follows:

<script type="text/javascript">
    $(function(){
       $(&#39;#btn&#39;).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
       $(&#39;#delAll&#39;).click(function(){
              $(&#39;#btn&#39;).unbind("click");
       });
    })
</script>

$('#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:

The code is as follows:

<script type="text/javascript">
    $(function(){
       $(&#39;#btn&#39;).bind("click", myFun1 = function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).bind("click", myFun2 = function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).bind("click", myFun3 = function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
       $(&#39;#delTwo&#39;).click(function(){
              $(&#39;#btn&#39;).unbind("click",myFun2);
       });
    })
</script>

The second parameter of the unbind() method is the name of the execution function corresponding to the event. After execution, only the event myFun2 is Deleted, the other two click events execute 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 handling function to each specific event (like click) of the matched element. The code is as follows:

The code is as follows:

<script type="text/javascript">
    $(function(){
       $(&#39;#btn&#39;).one("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).one("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).one("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
    })
</script>

After clicking, it will only be executed once. Clicking again will not trigger the effect. This is the one method.

The above is the detailed content of Take you to understand the binding event (bind()) and removal event (unbind()) in JQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Sharing experience on using triggerHandler() in jQueryNext article：Sharing experience on using triggerHandler() in jQuery

See more

Take you to understand the binding event (bind()) and removal event (unbind()) in JQuery

Related articles