jquery Dynamic Binding

Source: Internet
Author: User

First, the original demand

In the actual project, encountered a problem, is through the JS dynamically generated elements, can not trigger the JS event.

The original JS code:

$ (function  () {    $ (". Original"). Click (function  () {        alert ("123");    }); )

The above type of JS code is no problem in handling DOM elements loaded with the page loading. However, after processing the page load, adding the elements on the fly is not valid, and you need to take advantage of the jquery bindings.

Add the JS code of the element dynamically:

$ (function  () {     $ (". Run"). Click (function  () {     var BTN = "<button class= ' original ' > I am new to </button>";     $ (". Out"). Append (BTN);     }); })

In this case, if you click on the newly added button, the response event cannot be handled by the above declarative formula.

PS: I'm not sure what the reason is.

Second, the on method of jquery

By reviewing the instructions, it is found that the on () method of jquery is to support the binding of events on dynamically added elements, as shown in the following:

Official website Description (English): API explanation

英文说明 (English): Chinese API explanation (recommended)

Please refer to the above website for detailed instructions, here are only a few points to explain:

    1. Usage format: Jqueryobject.on (events [, selector] [, data], handler)---[This is optional]
    2. Explanation: Events is a single or multiple event, handler is the action to be performed to trigger the event.
    3. For selector, if it is null or not, then the element to which the binding jqueryobject matches, and if not NULL, is the binding of all elements in the jquyerobject background element that meet the selector requirements.
Iii. Methods of Treatment
<script type= "Text/javascript" >        $ (function  () {            //  Method 1            function  () {                alert ("HHHH");            });             // not valid?             function  () {                alert ("HHHH");            });        })     </script>

Method 1 certainly works, but it's strange that method 2 is invalid ...

Iv. Supplementary

Think good to add, left to this ...

jquery Dynamic Binding

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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