Summary of problems with jQuery on of binding dynamic elements

The jQuery on() method is one of the officially recommended methods for binding events. Using the on() method, you can bind specified events to dynamic elements that will be created dynamically in the future, such as append, and so on.

When I used on before 1 was always 1

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

Later, it is found that sometimes 1 straight cannot be bound (such as when the element is dynamically generated). After reviewing the document, it is found that the correct usage should be

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

At the same time, notice that

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 space-delimited event types and optional namespaces, such as "click" or "keydown.myPlugin".
selector: Descendant of the selector element for the trigger event of a filter by 1 selector string. If the selector is null or omitted, the event always fires when it reaches the selected element.

data: Pass event.data to the event handler when an event is triggered.

fn: The function that executes when this event is triggered. The false value can also be shortened to 1 function, returning false.

Replace bind ()

When the second parameter 'selector' is null, there is virtually no difference in usage between on() and bind(), so we can think of on() as just one more optional 'selector' parameter than bind(), so on() can be easily replaced by bind().

Replace live ()

Before 1.4, live() was a favorite because it binds events to current and future additions, and after 1.4, delegate() can do the same. The principle of live() is simple, as it delegates events via document, so we can also use on() to achieve the effect of live()1 by binding events to document.

live () method

The code is as follows:

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

on () 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 at work. It is a filter that only the descendants of the selected element will trigger the event.

Replace delegate ()

delegate() was introduced in 1.4 to delegate event binding issues to descendant elements via ancestor elements, somewhat similar to the benefits of live(). It's just that live() is delegated through the document element, whereas delegate can be any ancestor node. Use on() to implement the proxy notation and delegate() base 1.

The delegate () method

The code is as follows:

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

on () method

The code is as follows:

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

It looks like the order of the first and second arguments has been reversed by 1, the other basic 1.

conclusion

jQuery Launched on() for two purposes, 1 to unify the 1 interface and 2 to improve performance, so from now on, replace bind(), live(), delegate. In particular, don't use live() anymore, as it is already on the list of not recommended uses and can be killed at any time. If you bind only one event, go ahead and use one(), which doesn't change.

The jquery on() method binds dynamic elements

Without further ado, I will post the code directly to you.

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

Incorrectly, the following method only binds the click event for the first class div for evt, and div dynamically created with append is not bound

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

The correct usage is as follows:

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

0