jQuery on of Method Solution to Unresponsive Click Event of Binding Dynamic Elements

  • 2021-07-02 23:02:18
  • OfStack


$('#check_all').on('click' , function(){
alert(1);
});
$("#yujinlist").append(html);
count++; 
} 

When the above code is executed, when clicking # check_all, alert1 does not respond directly. After searching for information on the Internet, it is known that the elements in front of on must also exist in dom when the page is loaded. The original words are as follows:

live and on support binding events to dynamic elements and attributes, of which live is not recommended after JQUERY 1.7. Now we mainly use on. When using on, we should also pay attention to the elements before on. The elements before on must also exist in dom when the page loads. Dynamic elements or styles, etc., can be placed in the second parameter of on.

Because I output the relevant html first, and then I will have no problem executing it.


<div class="row">\
<div class="col-xs-12">\
<div class="control-group">\
<label class="control-label bolder blue"> Choose Town Street </label>\
<div class="row">\
<div class="checkbox col-xs-1">\
<label>\
<input type="checkbox" class="checkbox" id="check_all" />\
<span class="lbl"> District </span>\
</label>\
</div>\
<div id="check_item">\
<div class="checkbox col-xs-1 ">\
<label>\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl"> Southwest Street </span>\
</label>\
</div>\
<div class="checkbox col-xs-1 ">\
<label>\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl"> Yundonghai Street </span>\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label>\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl"> Baini Town </span>\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl"> Le Ping Town </span>\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl"> Datang Town </span>\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl"> Lubao Town </span>\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl"> Nanshan Town </span>\
</label>\
</div>\
</div>\
</div>\
</div>\
</div>\
</div>\
<hr />'; 
$('#check_all').on('click' , function(){
var that = this;
$('#check_item').find('input:checkbox')
.each(function(){
alert(2);
this.checked = that.checked;
$(this).closest('.col-xs-1').toggleClass('selected');
});
});

Let's look at the jquery on () method binding dynamic elements

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


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

Wrong usage, the following method only binds click event for div whose first class is evt, while div created dynamically with append does not


<script>
//  Bind events before adding 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>

Related articles: