Detailed explanation of the difference between using on instead of delegate and live in jQuery

In the early days, when assigning events or values ​​to dynamic elements loaded later on the page, live was used. Due to the low efficiency (in fact, there is not much data and it cannot be felt) ), later the delegate is used instead, and later, after 1.7, on is used instead of delegate. Both live and delegate can still be used in the new version. They are different in writing. It is easy to get confused if you don’t write for a while, so write it down Memo. If you click any button in p to add a new button:

## Page:

<div id="panel">   
      <input type="button" name="name"  value="clone"class="btnAdd" />
</div>

Script:

##1.1 Using live

jQuery

Version 1.3+

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

1.2 Directly change live to on without giving a scope such as #panel. This is effective for the

button at the beginning of the page. In other words, cannot be directly replaced like this live

$('.btnAdd').on('click', function () {    
$(this).clone().appendTo('#panel');
});

2. To use delegate, you need to give it a range, such as #panel, and let it search inside. This works Achieve the same effect as live.

jQuery version 1.4.3+

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

3.使用on 给它一个范围才行，如#panel,让它到里面找. 这样可以实现live和delegate一样的效果.

里面的'click', '.btnAdd'跟上面的delegate是相反的.只要记住on click是挨在一起的就行了.

jQuery版本1.7+

$('#panel').on('click', '.btnAdd', function () {
    $(this).clone().appendTo('#panel');
});

The above is the detailed content of Detailed explanation of the difference between using on instead of delegate and live in jQuery. For more information, please follow other related articles on the PHP Chinese website!