Talking about the dynamic binding of things in jQuery

During the development of jQuery, we often need to deal with various events, such as click (), hover () and so on. In API of jQuery, we can use different methods to bind these events to specific elements. In today's article, we'll show you how to use the bind (), on (), live (), and delegate () methods to bind specific events, when they are used, and when they don't apply. I hope to help you better understand and use the time processing method of jQuery.

1. bind () method

In tutorials or applications that use earlier versions of jQuery, we often use the bind () method to bind events to specific elements, as follows:

<section id="container">
 <img class="scv" src="images/scv.gif" alt="Terran unit" />
</section>
$('.scv').bind('click', function(){
  $('#container').append('<img class="scv" src="images/scv.gif" alt="Terran unit" />');
});

If you look at the latest documents related to jQuery 1.7. 1, you should know that bind in the latest jQuery is actually implemented by calling on () method at present, so if you use the latest jQuery version (currently 1.7. 1), try to avoid using bind () method.

If you click to run this example, you will definitely find that when you click the first picture, a new picture will be generated, but if you click the newly generated picture, you will not continue to add a new picture. Why is this happening? Because the elements bound using bind are all existing class= "scv" elements on the page, the newly generated elements are added to DOM without binding the click method we added. So how can new pictures be bound to our click method? We can use the clone () method, as follows:

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

We use the clone method here to generate a new image and add it to the # container container. Here we use the clone method parameter true to represent the cloned elements while cloning the bound method.

2. live () method

In the older version of jQuery, we had a method dedicated to handling event binding of dynamically generated elements-live (), and the live () method can be used to 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');
});

live () is invoked as follows:

We first bind the click method to Document, and then look for the. scv element in Document. This process can be wasteful for performance, so we can use the following optimization methods with parameters:

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

In the above code, we used # container as the binding context, and jQuery will query the. scv element in the element # container.

3. Delegate () method

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

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

As you can see in the above code, we first set the context of the method binding-# container, then look for the element where class is. scv, and then bind the click method.

Note: The cloned elements added here should be the context you defined, otherwise, the newly generated image will not be bound to the click method.

4. on () method

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

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

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

});

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

STEP 5 Summarize

Generally speaking, in the latest version of jQuery, all methods are basically handled by on (). If you are developing for the new version of jQuery, you can consider using delegate () and on () methods to handle event binding. Although previous methods can be used, most of them have retired from the historical stage.