当元素未直接加载时,事件不起作用

时间:2015-05-26 14:53:00

标签: javascript jquery html ajax

我有一个包含许多复选框的表,这些复选框是用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/>";
    }
});

这部分运作良好! 问题是当我试图整合一个&#34;选择全部&#34;按钮。

我的Javascript for it:

$(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'>,它就不起作用,也没有任何反应。

我很确定这是因为事件设置为&#34; selectall&#34;在页面的负载,但它还没有存在,它不会在以后查找。

解决方案是什么?谢谢你的帮助

2 个答案:

答案 0 :(得分:3)

您可以使用event delegation,如下所示:

$('#devis').on("change", "#selectall", function(e) {
    $("input[type=checkbox]").prop("checked", $(this).prop("checked"));
});

答案 1 :(得分:0)

你的想法是正确的:

如果在文档就绪代码执行后创建了selectall复选框,则jquery无法找到它(因为它尚未创建)。

我不推荐使用 live 函数,因为它已被弃用,可以在未来版本的jquery中删除。

您仍然可以使用 on 功能,但稍作修改:

$("#devis").on("change", "#selectall",function(e) {

请注意, #mycontainer 必须存在于文档加载中。

如果您不能放置容器,这将始终有效:

$("body").on("change", "#selectall",function(e) {