未直接加載元素時，事件不起作用

Question

我有一個帶有許多復選框的表，這些復選框是用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”，但它尚不存在，以后也不會查找。

解決辦法是什么？ 感謝幫助

Answer 1

您可以按以下方式使用event delegation ：

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

Answer 2

您的想法正確：

如果您的selectall復選框是在文檔就緒的代碼執行之后創建的，則jquery找不到它（因為它尚未創建）。

我不會建議使用live函數，因為它已被棄用，並且可以在未來版本的jquery中刪除。

您仍然可以使用on函數，但需要進行一些修改：

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

請注意， #mycontainer必須在文檔加載時存在。

如果您不能放置容器，它將始終有效：

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