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来实现select all复选框“我把我的Jquery代码放在$（document）中（...”：

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

它不起作用！但是，如果我在一个简单的代码上尝试我的上述代码，它工作正常！因为我的复选框的id为“chkAll”，用于检查all，所有其他复选框的“opt”类都被渲染并放入带有ajax调用的HTML中，这可能是为什么这个简单的jquery无法工作的原因？ / p>

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

由于

Answer 1

问题在于您正在监听document.ready上的click事件，而您的内容来自ajax请求，因此它不适用于DOM-ready。相反，你应该使用一个绑定你的事件的函数

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 example

作为on状态的文档：

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

Answer 3

尝试使用jquery event delegation

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

简单检查所有（复选框）不起作用

3 个答案: