首页 文章

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

提问于
浏览 次
0

我有一张表格;当我提交它时，我使用Ajax调用并通过以下代码行将结果放入div：

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

在我放入ID为（resultFrm2）的div中的结果中，我有一个复选框（id为“chkAll”）来选择所有其他复选框（带有“opt”的clas）：

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）ready（...”中：

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

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

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

谢谢

javascript jquery ajax

3 回答

  • 0

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

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

    jsFiddle example

    作为on状态的文档：

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

    回复于
  • 2

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

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

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

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

    在代码方面，j08691的例子使用起来要好得多，但我想我的工作原理就是为什么它没有像你预期的那样工作:)

    回复于
  • 1

    尝试使用jquery event delegation

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

相关问题