Javascript code stopped working inside a ASP.NET user control with Update Panel

Question

I have a Javascript code that is used for a full gridview row clicking to check a checkbox in the same row. (Placed in an external file)

  $(document).ready(function () {
                $('tr.dataRow').on('click', function () {
                    var checked = $(this).find('input[id*=chkBusinessSelected]').prop('checked');
                    $(this).find('input[id*=chkBusinessSelected]').prop('checked', !checked);

                });
        });

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

        prm.add_endRequest(function () {
            $('tr.dataRow').on('click', function () {
                var checked = $(this).find('input[id*=chkBusinessSelected]').prop('checked');
                $(this).find('input[id*=chkBusinessSelected]').prop('checked', !checked);

            });
        });

In the code behind of the User Control

  protected void grdBusiness_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.CssClass = "dataRow";
        }
    }

Take note that they are enclosed in an Update Panel to avoid full Postback. The function is for multiple selecting an item in a gridview. Everything worked well as is, until I used the User control in a parent page where in, that page has an Update Panel usage also.

Using the gridview row clicking functionality and click another button outside the user control to process something. Upon using or repeating the function again, I cannot click the checkbox already. The Javacript code stopped working.

I tried removing the UpdatePanel on the parent page, and it worked. But I needed to put Update panel both in the User Control and the Parent page.

Answer 1

For jQuery 1.7+ you can attach an event handler to a parent element using .on(), and pass the a selector combined with 'dataRow' as an argument.

See http://api.jquery.com/on/

So instead of...

$('tr.dataRow').click( function() {
    // do something
});

You can write...

$('body').on('click', 'tr.dataRow', function() {
    // do something
});

Not you can write it outside the $(document).ready(function () { also.
If you are using older version you can use .live() method of jQuery.

More detail Event binding on dynamically created elements?