Question

我正在尝试使用jquery来检测特定表中的复选框更改（即“grid1”）。

（FWIW - 表格是jqgrid）

但是，看起来我使用的“选择器”语句并不像我期望的那样工作。

它不是检测特定表格中的复选框更改（即“grid1”），而是检测/响应整个文档中的更改 - 包括“grid2”。

我的选择器显然做错了。 - 我只是不知道是什么。

感谢您对此提供的任何帮助： - ）

仅供参考 - jquery“selector”代码如下所示......

        $("#grid1 :checkbox")
        {
            $(this).change( function(e)
            {
                var t = $(e.target);   
                var row = t.closest("tbody").children().index(t.closest("tr"));
                var rowids = $('#grid1').jqGrid('getDataIDs');
                var rowid = rowids[row-1];
                var rowdata = $("#grid1").getRowData(rowid);
                $("#grid1").jqGrid('setRowData', rowid, rowdata); 
                $("#grid1").setSelection(rowid);                        
            });
        };

...以及看起来像这样的HTML结构......

        <body>
            <form id="form1">
                <div>
                    <div>                    
                        <input type="submit" id="submit"  value="Submit Grid Edits" />
                    </div>
                    <div id="div1">
                        <table id="grid1"></table>
                        <div id="pager1" ></div>
                    </div>
                    <div id="div2">
                        <table id="grid2"></table>
                        <div id="pager2" ></div>
                    </div>                
                </div>
            </form>
        </body>

Answer 1

为什么不这样做：

    $("#grid1 :checkbox").on("change", function(e) {
        //do stuff
    });

jsfiddle

修改

正如@sairn和@Oleg所提到的，这更合适：

$("#grid1").on("change", ":checkbox", function() { //do stuff });

Answer 2

我建议您在"change"元素上绑定<table>事件而不是使用$("#grid1 :checkbox").on("change", ...);。主要区别在于$("#grid1 :checkbox")表示复选框数组。和绑定将在每个元素上设置单独的事件句柄。另一方面，如果您绑定change <table>事件，则设置仅一个事件句柄。由于event bubbling，我们可以捕获由子复选框触发的事件处理程序"change"事件。在你保存注册每个句柄所需的一点内存的方式，但你的代码将仍然非常简单。参见讨论密切问题的the old answer。

The demo演示了这种方法。事件句柄看起来如此

$("#grid1").change(function (e) {
    var $td = $(e.target).closest("td"),     // the cell
        $tr = $td.closest("tr.jqgrow"),      // the row
        rowid = $tr.attr("id"),
        iCol = $.jgrid.getCellIndex($td[0]), // column index
        colModel = $(this).jqGrid("getGridParam", "colModel");

    // verify that event fired in the column "closed"
    if (iCol >= 0 && colModel[iCol].name === "closed" &&
            e.target.nodeName.toUpperCase() === "INPUT") {
        alert("Chechbox in rowid=" + rowid + " clicked. It's " +
            ($(e.target).is(":checked") ? "checked" : "unchecked") + " now");
    }
});

显示如下结果

enter image description here

如何配置jquery“selector”以将“更改”事件检测限制为HTML文档中的特定“”？<table> </table>

2 个答案: