Javascript 代码在带有更新面板的 ASP.NET 用户控件中停止工作

Question

我有一个 Javascript 代码，用于 完整的 gridview 行单击以选中同一行中的复选框 。（放在外部文件中）

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

            });
        });

在用户控件后面的代码中

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

请注意，它们包含在更新面板中以避免完全回发。该功能用于在 gridview 中选择多个项目。一切都按原样运行，直到我在父页面中使用用户控件，该页面也使用了更新面板。

使用 gridview 行单击功能并单击用户控件之外的另一个按钮来处理某些内容。再次使用或重复该功能后，我无法单击该复选框。 Javacript 代码停止工作。

我尝试删除父页面上的 UpdatePanel，它起作用了。但是我需要将更新面板同时放在用户控件和父页面中。

Answer 1

对于 jQuery 1.7+，您可以使用 .on() 将事件处理程序附加到父元素，并将选择器与 'dataRow' 组合作为参数传递。

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

所以而不是...

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

你可以写...

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

不是你也可以写在$(document).ready(function () {之外。
如果您使用的是旧版本，您可以使用 jQuery 的 .live() 方法。

更多详情Event binding on dynamically created elements?

Javascript 代码在带有更新面板的 ASP.NET 用户控件中停止工作

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

javascript

c#

asp.net

vb.net

updatepanel