Future element binding events in jquery with Bind, live or On_jquery

Source: Internet
Author: User
Binding events for future element bindings cannot be used with BIND,

1, you can use live instead, but to pay attention to the version of jquery, according to the official documents, from the beginning of 1.7 do not recommend live and delegate, 1.9 to remove live.

2, recommended on instead (note: 1.7 and above version to support). Usage: On (EVENTS,[SELECTOR],[DATA],FN)
Copy Code code as follows:

is available in $ (function () {})
$ (document). On ("click", "#testDiv", function () {
$ (this) here means $ ("#testDiv"), not $ (document)
});

3. When you only want to bind a one-time event handler to a specific event (like click) for each matching element, using. One () instead of on, note that it is not possible to execute once on all [selector], but to do so on all of these [select], The elements of the future are also effective.

4, if a DIV has an increase in the deletion of three buttons need to bind events, like the following write:
Copy Code code as follows:

$ (' #btn-add '). Click (function () {});
$ (' #btn-del '). Click (function () {});
$ (' #btn-edit '). Click (function () {});

The disadvantage of this writing: see the structure of the three links, there is no reason for event bubbling.

Take a look at some of the ideas recommended by Coffeedeveloper for jquery's event bindings, which can be written in this way:
Copy Code code as follows:

$ ("#btnContainer"). Coffee ({
Click: {
' #btn-add ': function () {//do something},
' #btn-del ': function () {//do something},
' #btn-edit ': function () {//do something}
} ,
mouseenter:{
' #btn-abc ': function () {//do something},
}
});

Is it much nicer to write, (coffee) is a custom function, can you write this function yourself? , but if the binding function is longer, the sense code looks a little messy, and the comments
Copy Code code as follows:

$ (' #btnContainer ')
. On (' Click ', ' #btn-add ', function () {})
. On (' Click ', ' #btn-del ', function () {})
. On (' Click ', ' #btn-edit ', function () {});

This kind of writing also avoids the two disadvantages mentioned above, and looks not disorderly.

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.