[英]Event doesn't work when element isn't loaded directly
我有一个带有许多复选框的表,这些复选框是用Ajax生成的:
$.ajax({
type: "GET",
url: "jsonDevisUtilisateur.php?ra=" + $('#ra').val(),
success: function(data) {
var table = "<table class='dvs'><tr><td>Numéro</td><td>Client</td><td>Site</td><td>Libellé</td><td>Statut</td><td></td></tr>"
for (var i = 0; i < data.length; i++) {
table += "<tr><td>" + data[i].numDevis + "</td>";
table += "<td>" + data[i].client + "</td>";
table += "<td>" + data[i].site + "</td>";
table += "<td>" + data[i].libelle + "</td>";
table += "<td>" + data[i].statut + "</td>";
table += "<td><input type='checkbox' class='box' value='" + data[i].id + "' name='box[]'></td></tr>"
}
table += "</table>";
document.getElementById('devis').innerHTML = table + "<br/><br/>";
}
});
这部分运作良好! 问题是当我尝试集成“全选”按钮时。
我的Java语言:
$(document).ready(function() {
$("#selectall").on("change", function(e) {
$("input[type=checkbox]").prop("checked", $(this).prop("checked"));
});
});
当我的全选复选框: <input type='checkbox' id='selectall' name='selectall'>
与我的HTML同时创建时,它可以工作。
但是,如果我使用ajax函数在TABLE中创建我的<input type='checkbox' id='selectall' name='selectall'>
,则此操作将无效,并且什么也不会发生。
我敢肯定这是因为该事件在页面加载时被设置为“ selectall”,但它尚不存在,以后也不会查找。
解决办法是什么? 感谢帮助
您可以按以下方式使用event delegation
:
$('#devis').on("change", "#selectall", function(e) {
$("input[type=checkbox]").prop("checked", $(this).prop("checked"));
});
您的想法正确:
如果您的selectall复选框是在文档就绪的代码执行之后创建的,则jquery找不到它(因为它尚未创建)。
我不会建议使用live函数,因为它已被弃用,并且可以在未来版本的jquery中删除。
您仍然可以使用on函数,但需要进行一些修改:
$("#devis").on("change", "#selectall",function(e) {
请注意, #mycontainer必须在文档加载时存在。
如果您不能放置容器,它将始终有效:
$("body").on("change", "#selectall",function(e) {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.