Talking about the dynamic binding of events in jQuery, talking about the dynamic binding of jquery

Talking about the dynamic binding of events in jQuery, talking about the dynamic binding of jquery

During jQuery development, we often need to handle various events, such as click () and hover. In jQuery APIs, we can use different methods to bind these events to specific elements. In today's article, we will introduce how to bind (), on (), live (), and delegate () Methods to bind specific events and when to use them, they are not applicable under what circumstances. We hope to help you better understand and use jQuery's time processing methods.

I. bind () method

In earlier jQuery tutorials or applications, we often use the bind () method to bind events to specific elements, as shown below:

<section id="container"> </section>$('.scv').bind('click', function(){  $('#container').append('');});

If you check the latest jQuery1.7.1 documents, you should know that the latest bind in jQuery is actually implemented by calling the on () method. So, if you are using the latest jQuery version (1.7.1 currently), try to avoid using the bind () method.

If you click to run this example, you will surely find that when you click the first image, a new image will be generated, but if you click the newly generated image, the system does not continue adding new images. Why? Because the elements bound with bind are all existing class = "scv" elements on the page, the newly generated elements are added to the DOM, And the click method we added is not bound. So how can we bind a new image to our click method. We can use the clone () method as follows:

$('.scv').bind('click', function(){ $(this).clone(true).appendTo('#container');});

Here we use the clone method to generate a new image and add it to the # container. Here, we use the clone method parameter true, which indicates that the cloned element clones the bound method at the same time.

Ii. live () method

In the old jQuery version, we have a method specifically used to handle events bound to dynamically generated elements-live (), using live () methods can apply the effect of method binding to existing or newly created DOM elements. The Code is as follows:

$('.scv').live('click', function(){ $(this).clone().appendTo('#container');});

The live () call process is as follows:

We first bind the click Method to the Document, and then find whether the. scv element exists in the Document. This process may be a waste of performance, so we can use the following parameter optimization method:

$('.scv', '#container').live('click', function(){ $(this).clone().appendTo('#container');});

In the above Code, we use # container as the binding context. jQuery will query the. scv element in the # container element.

3. Delegate () method

In the latest jQuery version, we 'd better not use the live () method because it has been abandoned. Here we use the delegate method to specify the event binding context, as shown below:

$('#container').delegate('.scv','click', function(){  $(this).clone().appendTo('#container');});

As you can see in the above Code, we first set the method binding context-# container, then, find the element whose class is. scv, and then bind the click method.

Note: The cloned element must be the context defined by you. Otherwise, the new image cannot be bound to the click method.

Iv. on () method

. On (events [, selector] [, data], handler (eventObject ))

This is an Api officially provided by jQuery. In fact, in the jQuery class library of the latest version, all the above methods are actually calling the on () method. Therefore, if you develop the latest version of jQuery, you can use the on () method to handle all event bindings to avoid too many method calls. As follows:

$('.scv').on('click', function(){  $(this).clone(true).appendTo('#container');});

If you want to ensure that the dynamically added items can be bound to handler, the selector in $ ("selector"). on () should be of a higher level, such as parent div, body, or document.

V. Summary

In general, in the latest jQuery version, all methods are basically handled by the on () method. If you develop the new jQuery version, you can consider using delegate () it is bound to the on () method to handle events. Although the previous method can also be used, most of them have withdrawn from the historical stage.

In the above discussion, the dynamic binding of jQuery is all the content shared by Alibaba Cloud xiaobian. I hope to give you a reference and support for the help house.