Web Front-end
JS Tutorial
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
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(){
$('#btn').bind("click", function(){
$('#test').append("<p>绑定函数1</p>");
}).bind("click", function(){
$('#test').append("<p>绑定函数2</p>");
}).bind("click", function(){
$('#test').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(){
$('#btn').bind("click", function(){
$('#test').append("<p>绑定函数1</p>");
}).bind("click", function(){
$('#test').append("<p>绑定函数2</p>");
}).bind("click", function(){
$('#test').append("<p>绑定函数3</p>");
});
$('#delAll').click(function(){
$('#btn').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(){
$('#btn').bind("click", myFun1 = function(){
$('#test').append("<p>绑定函数1</p>");
}).bind("click", myFun2 = function(){
$('#test').append("<p>绑定函数2</p>");
}).bind("click", myFun3 = function(){
$('#test').append("<p>绑定函数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 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(){
$('#btn').one("click", function(){
$('#test').append("<p>绑定函数1</p>");
}).one("click", function(){
$('#test').append("<p>绑定函数2</p>");
}).one("click", function(){
$('#test').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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to bind a sub-account on Xiaohongshu? How does it check whether the account is normal?
Mar 21, 2024 pm 10:11 PM
In today's era of information explosion, the construction of personal brand and corporate image has become increasingly important. As the leading fashion life sharing platform in China, Xiaohongshu has attracted a large number of user attention and participation. For those users who want to expand their influence and improve the efficiency of content dissemination, binding sub-accounts has become an effective means. So, how does Xiaohongshu bind a sub-account? How to check whether the account is normal? This article will answer these questions for you in detail. 1. How to bind a sub-account on Xiaohongshu? 1. Log in to your main account: First, you need to log in to your Xiaohongshu main account. 2. Open the settings menu: click "Me" in the upper right corner, and then select "Settings". 3. Enter account management: In the settings menu, find the "Account Management" or "Account Assistant" option and click
BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange?
Apr 26, 2024 am 09:40 AM
MetaMask (also called Little Fox Wallet in Chinese) is a free and well-received encryption wallet software. Currently, BTCC supports binding to the MetaMask wallet. After binding, you can use the MetaMask wallet to quickly log in, store value, buy coins, etc., and you can also get 20 USDT trial bonus for the first time binding. In the BTCCMetaMask wallet tutorial, we will introduce in detail how to register and use MetaMask, and how to bind and use the Little Fox wallet in BTCC. What is MetaMask wallet? With over 30 million users, MetaMask Little Fox Wallet is one of the most popular cryptocurrency wallets today. It is free to use and can be installed on the network as an extension
Steps and methods to bind Douyin in Toutiao
Mar 22, 2024 pm 05:56 PM
1. Open Toutiao. 2. Click My in the lower right corner. 3. Click [System Settings]. 4. Click [Account and Privacy Settings]. 5. Click the button on the right side of [Douyin] to bind Douyin.
How to bind the Cainiao app to Pinduoduo? How to add the Cainiao Wrap to Pinduoduo platform?
Mar 19, 2024 pm 02:30 PM
The Cainiao app is a platform that can provide you with various logistics information. The functions here are very powerful and easy to use. If you have any logistics-related problems, they can be solved here. Anyway, it can bring you a The one-stop service can solve everything in time. Checking the express delivery, picking up the express delivery, sending the express delivery, etc. are all without any problems. We have cooperated with various platforms and all the information can be queried. However, sometimes It will happen that the goods purchased on Pinduoduo cannot display the logistics information. In fact, you need to manually bind Pinduoduo to achieve this. The specific methods have been sorted out below, and everyone can take a look. . How to bind Cainiao to Pinduoduo account: 1. Open Cainiao APP and go to the main page
How to bind the Cainiao APP to Pinduoduo How to bind the Cainiao APP to Pinduoduo
Mar 19, 2024 pm 05:16 PM
Do you know how to bind Pinduoduo when using Cainiao Wrap? The official version of Cainiao Wrap App does not automatically synchronize some Pinduoduo’s logistics information on this platform. All we need to do is You can copy the order number or check your mobile phone to see if there is any express delivery information. Of course, these all need to be completed manually. If you want to know more, come and take a look with the editor. How to bind the Cainiao APP to Pinduoduo 1. Open the Cainiao APP and click "Package Guide" in the upper left corner of the main page. 2. In the interface, there are many shopping websites, and accounts can be bound. 3. Click to import other e-commerce platforms. 4. User authorization: Click Pinduoduo to go to the interface
How to use PUT request method in jQuery?
Feb 28, 2024 pm 03:12 PM
How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
What should I do if my little black box cannot be bound to Steam?
Mar 12, 2024 pm 03:10 PM
The inability of the Black Box to bind to Steam may be caused by network or software version issues. The little black box provides information including prices of released and upcoming games, computer configuration requirements and reviews, and in-depth gameplay analysis. In addition, it also allows users to find the information they need through mobile devices anytime and anywhere. What to do if the little black box cannot be bound to Steam 1. Confirm the network status and make sure the device is connected to the Internet. 2. Check the Little Black Box version. Please make sure you are using the latest version of the Little Black Box software and try to bind your Steam account. 3. To check the Steam account settings, please log in to the Steam account and check whether the third-party software binding function is turned on in the privacy settings. 4. Contact official customer service If the above steps still cannot solve the problem, it is recommended that you contact official customer service for help.
jQuery Tips: Quickly modify the text of all a tags on the page
Feb 28, 2024 pm 09:06 PM
Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <
