0

I am attempting to use jquery to detect checkbox changes in a specific table (i.e., "grid1").

(FWIW - the table is a jqgrid)

But, it appears that the "selector" statement I am using is not working the way I expect.

Instead of detecting checkbox changes within the specific table (i.e., "grid1"), it is also detecting/reacting to changes in the entire document - including "grid2".

I am clearly doing something wrong with my selector. --I just don't know what.

Thanks for any help on this :-)

FYI - The jquery "selector" code looks like this...

        $("#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);                        
            });
        };

...and the HTML structure that looks like this...

        <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>
Blazemonger
  • 90,923
  • 26
  • 142
  • 180
sairn
  • 461
  • 3
  • 24
  • 58
  • Your first two lines look invalid, should be throwing a js error. – Kevin B May 24 '13 at 15:36
  • Do you use `formatter: "checkbox", formatoptions: {disabled: false}` or some other custom formatter with chechbox? – Oleg May 24 '13 at 16:03

2 Answers2

1

Why not do something like this:

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

jsfiddle

EDIT:

As both @sairn and @Oleg mentioned, this would be more appropriate:

$("#grid1").on("change", ":checkbox", function() {
    //do stuff
});
JayPea
  • 9,551
  • 7
  • 44
  • 65
  • You're right JayPea!.. - Ironically, I had just discovered the solution a few mins ago, myself. (Thank you very much for reading AND answering my post)... I had used: $("#grid1").on('change','input:checkbox', function (e){} – sairn May 24 '13 at 15:45
1

I would recommend you to bind "change" event on <table> element instead of usage $("#grid1 :checkbox").on("change", ...);. The main difference is that $("#grid1 :checkbox") represent array of checkboxes. and binding will set separate event handles on every of the element. On the other side if you bind change event of <table> you set only one event handle. Because of event bubbling we can catch in the event handler "change" event fired by child checkboxes. In the way you save a little memory needed to register every handle, but your code will be still very simple. See the old answer which discuss close problems.

The demo demonstrate the approach. The event handle looks so

$("#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");
    }
});

It displays results like the following

enter image description here

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798