0

我有一个表格；当我提交它时，我使用 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 不起作用的原因吗？

如果我的问题不清楚，请告诉我，我会提供更多说明。

谢谢

4

3 回答 3

2

问题是您正在收听 document.ready 上的点击事件，并且您的内容来自 ajax 请求，因此它不存在于 DOM-ready 上。相反，您应该使用例如绑定您的事件的函数

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

并在此之后将其称为 ajax 成功

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

就代码而言，j08691 的示例使用起来要好得多，但我想我的示例可以说明为什么它没有按预期工作:)

于 2013-10-25T20:34:24.870 回答
1

.on()处理动态创建的元素时使用的事件委托语法：

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

jsFiddle 示例

作为 on 状态的文档：

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。

于 2013-10-25T20:32:49.297 回答
0

尝试使用jquery 事件委托

    $(body).on('click',"#chkAll"),function() {
        $(".opt").prop('checked', this.checked);
   });
于 2013-10-25T20:43:51.800 回答