Class Attribute On Gridview Doesn't Work After Button Click

I have a GridView where you can edit the information on the row. So you can click on the row and this pop ups a box where can change something, then click on save. But after I clic

Solution 1:

The problem is the UpdatePanel. It refreshes the GridView using Ajax, and although the user does not see a Postback, the DOM is still changes and the previous bindings made with $(".GVAddressesRow").click are lost. That is why you have to execute it again after a UpdatePanel refresh.

You can use the PageRequestManager for that.

<scripttype="text/javascript">
    $(document).ready(function () {
        bindPopup();
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        bindPopup();
    });

    functionbindPopup() {
        $(".GVAddressesRow").click(function (e) {
            ShowAddOBSAddress(this, e.pageX, e.pageY, "Edit");
            EditOBSAddress($(this).attr("ID"));
        });
    }
</script>

Solution 2:

It works the first time because you have added a click handler to all the rows of the gridview like this: $(".GVAddressesRow").click. But when you click the save button new html (rows) are returned from the server. You are not adding a handler to those new rows so they will not work.

To solve the issue you can use jquery on instead of click. Jquery on will work for dynamically created html elements. Please see this answer for more info.

// Bind to all items with class GVAddressesRow inside// #whatever element, even new ones created later.
$('#whatever').on('click', '.GVAddressesRow', function() {
     /* your code here */
});