Summary of problems that occur when binding dynamic elements with jQuery on()_jquery

The jQuery on() method is an officially recommended method for binding events. Use the on() method to bind specified events to dynamic elements created dynamically in the future, such as append, etc.

When I used on before, it was always

$("").on('click','function(){ 
}') 

Later, I found that sometimes it could not be bound (such as when elements are dynamically generated). After checking the documentation, I found that the correct usage should be

$(document).on("change","#pageSize_out",function(){ 
if($("#page_out").val()!=0){ 
$("#pageSize").val($(this).val()); 
list(); 
} 
}) 

Also, please note

As this answers receives a lot of attention, here are two supplementary advises :

1) When it's possible, try to bind the event listener to the most precise element, to avoid useless event handling.

That is, if you're adding an element of class b to an existing element of id a, then don't use
$(document.body).on('click', '#a .b', function(){
but use
$('#a').on('click', '.b', function(){

2) Be careful, when you add an element with an id, to ensure you're not adding it twice. Not only is it "illegal" in HTML to have two elements with the same id but it breaks a lot of things. For example a selector "#c" would retrieve only one element with this id.

on(events,[selector],[data],fn)

events: One or more event types separated by spaces and an optional namespace, such as "click" or "keydown.myPlugin".
selector: A selector string for the filter's descendants of the selector element that triggered the event. If the selector is null or omitted, the event is always fired when it reaches the selected element.

data: When an event is triggered, event.data must be passed to the event processing function.

fn: The function executed when the event is triggered. The false value can also be used as a shorthand for a function that returns false.

Replace bind()

When the second parameter 'selector' is null, there is basically no difference in usage between on() and bind(), so we can think that on() just has one more option than bind() 'selector' parameter, so on() can easily replace bind()

Replace live()

Before 1.4, I believe everyone liked to use live() because it can bind events to current and future elements. Of course, after 1.4, delegate() can also do similar things. The principle of live() is very simple. It delegates events through the document, so we can also use on() to achieve the same effect as live() by binding the event to the document.

How to write live()

The code is as follows:

$('#list li').live('click', '#list li', function() {
//function code here.
}); 

on() writing method

The code is as follows:

$(document).on('click', '#list li', function() {
//function code here.
});

The key here is that the second parameter 'selector' is in effect. It acts as a filter, and only descendant elements of the selected element will trigger the event.

Replace delegate()

delegate() was introduced in 1.4, with the purpose of delegating event binding issues of descendant elements through ancestor elements. To some extent, it has similar advantages to live(). It's just that live() is delegated through the document element, and delegate can be any ancestor node. The writing method of using on() to implement the proxy is basically the same as that of delegate().

How to write delegate()

The code is as follows:

$('#list').delegate('li', 'click', function() {
//function code here.
});

on() writing method

The code is as follows:

$('#list').on('click', 'li', function() {
//function code here.
});

It seems that the order of the first and second parameters is reversed, but everything else is basically the same.

Summary

jQuery launched on() for two purposes, one is to unify the interface, and the other is to improve performance, so from now on, use on() to replace bind(), live(), and delegate. In particular, don't use live() anymore, because it is already on the deprecated list and will be killed at any time. If you only bind the event once, then use one(), there is no change in this.

jquery on() method binds dynamic elements

No more nonsense, let me just post the code for you.

<div id="test">
<div class="evt">evt1</div>
</div>

Wrong usage. The following method only binds the click event to the first div with class evt. The div dynamically created using append is not bound

<script>
// 先绑定事件再添加div
$('#test .evt').on('click', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>

The correct usage is as follows:

<script>
$('body').on('click', '#test .evt', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>