Home > Others

jquery Live () dynamic binding event function usage

Source: Internet
Author: User
Tags bind
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

I use jquery dynamic Insert node, directly binding click event, debugging Half-day found invalid, the original need to dynamically bind events, you can use the live () function, the following examples:

The live () method attaches one or more event handlers for the selected element, and provides a function to run when these events occur.

Event handlers that are attached through the live () method apply to the current and future elements of the matching selector, such as the new element created by the script.

Grammar

$ (selector). Live (Event,data,function)

Adding event handlers to future elements


How Live () works
The magical thing about live () is that it does not bind events to the elements you select, but is actually bound to the nodes of the DOM tree (in the case of $ (document)), and is passed as a parameter in the element.

Then when you click on an element, the Click event is passed up on the DOM tree until the root node is reached. The trigger for this. Click () event is already created on the root node by. Live (). This trigger method will first detect if the target being clicked matches the selector of the. Live () call. So the above example checks to see if the clicked element matches the $ (' a ') in the $ (' a '). Live (), and if so, the bound method executes.

Because no matter what you click on the root node, the. Click () event of the root node is triggered, and this check occurs when you click on any element that is added to the root node.


How to use the Live () method to add an event handler to an element that has not yet been created.

The code is as follows Copy Code

<script type= "Text/javascript" src= "/jquery/jquery.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("P"). Live ("Click", Function () {
$ (this). Slidetoggle ();
});
$ ("button"). Click (function () {
$ ("<p>this is a new paragraph.</p>"). InsertAfter ("button");
});
});
</script>
<body>
<p> this is a paragraph. </p>
<p> Clicking on any P element will make it disappear. Include this paragraph. </p>
<button> Insert a new P element after this button </button>
<p><b> note:</b> by using the Live () method instead of the bind () method, the new P element will also disappear when clicked. </p>
</body>

Now let's take a look at an example

The code is as follows Copy Code

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type= "Text/javascript" ></ Script>
<body>
<input type= "button" value= "Testing" class= "test"/>
<script>
$ (function () {
The first Test button is valid
$ (". Test"). Click (function () {
Alert ("This is OK");
});
The second button click event is invalid
$ (' <input type= ' button ' value= ' Tests ' class= ' test '/> '). InsertAfter (". Test");
});
</script>
</body>

You can use the Live function:

The code is as follows Copy Code
        <script>
            $ ( function () {
                $ (' <input type= "button" value= "Tests" class= "test"/> "). InsertAfter (". Test ");
                $ (". Test"). Live ( ' Click ', Function () {
                     alert ("All button is OK");
               });
           });
        </script>


Of course, if you clone element clone (True) with the true argument, the event handler function is copied as follows:

The code is as follows Copy Code

<script
            $ (function () {
                 $ (". Test"). Click (function () {
                     Alert ("All button is OK, too!");
               });
                $ (". Test"). Clone (true). InsertAfter (". Test");
           });
</script>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
difference between static binding and dynamic binding in c microsoft shanghai event live live kernel event jquery file upload dynamic directory php dynamic function dynamic function test php dynamic function call

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More