簡單檢查所有（復選框）不起作用

Question

我有一個表格； 當我提交它時，我使用Ajax調用並將結果通過以下代碼行放入div中：

$("#resultFrm2").html(html);

結果是，我將一個ID為（resultFrm2）的div放入了一個復選框（其ID為“ chkAll”）以選擇所有其他復選框（其后綴為“ opt”）：

                html = "<table id='myTable' class='table table-striped table-bordered table-hover'><thead><tr id='test'><th><div class='td_data'>ID</div></th><th><div class='td_data'>First Name</div></th><th ><div class='td_data'>Last Name</div></th><th><div class='td_data'>User Name</div></th><th><div class='td_data'>Start Date</div></th><th><div class='td_data'><input type='checkbox' id='chkAll'/></div></th></tr></thead><tbody id='contentTable'>";

                for (var i = 0; i < data.length; i++) {
                    html = html + "<tr  id='trResponses' ><td><div class='td_data'>" + data[i]['id'] + "</div></td><td><div class='td_data'>" + data[i]['firstName'] + "</div></td><td><div class='td_data'>" + data[i]['lastName'] + "</div></td><td><div class='td_data'>" + data[i]['username'] + "</div></td><td><div class='td_data'>" + data[i]['start'] + "</div></td><td><div class='td_data'><input class='checkbox opt' type='checkbox' name='check_list[]'  /></div></td></tr>";

                }

現在，我使用jquery來實現全選復選框“我將jquery代碼放在$（document）ready（...”里面：

$("#chkAll").click(function() {
    alert('inside');
    $(".opt").prop('checked', this.checked);
});

它不起作用！ 但是，如果我在簡單的代碼上嘗試上述代碼，則效果很好！ 由於我的ID為“ chkAll”的所有復選框均已選中，而所有其他復選框的類均為“ opt”，並且已通過ajax調用放入HTML中，這是否可能是為什么此簡單的jquery無法正常工作的原因？

如果我的問題不清楚，請告訴我，我將提供更多說明。

謝謝

Answer 1

問題是您正在偵聽document.ready上的click事件，並且您的內容來自ajax請求，因此它在DOM就緒中不存在。 相反，您應該使用例如綁定事件的函數

function initHandlers() {
   $("#chkAll").click(function() {
       $(".opt").prop('checked', this.checked);
   });
}

並在此之后稱贊ajax成功

$("#resultFrm2").html(html);
initHandlers();

就代碼j08691的示例而言，它要好用得多，但是我想我的示例可以作為為什么它無法按預期工作的示例：)

Answer 2

處理動態創建的元素時，請使用.on()的事件委托語法：

$('#resultFrm2').on('click', "#chkAll", function() {
    $(".opt").prop('checked', this.checked);
});

jsFiddle示例

作為on狀態的文檔：

事件處理程序僅綁定到當前選定的元素； 當您的代碼調用.on（）時，它們必須存在於頁面上。 為了確保元素存在並可以選擇，請在文檔就緒處理程序內對頁面上HTML標記中的元素執行事件綁定。 如果將新HTML注入到頁面中，請在將新HTML放入頁面后選擇元素並附加事件處理程序。

Answer 3

嘗試使用jQuery事件委托

    $(body).on('click',"#chkAll"),function() {
        $(".opt").prop('checked', this.checked);
   });