javascript - JQuery 事件在异步回发时不起作用,在第二次回发时修复,在第三次回发时中断

标签 javascript c# jquery asp.net jquery-events

这是我的页面的简化版本:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        var cbFuncInit = function() {
            $('div').click(function(evt) {
                if (evt.target.type !== 'checkbox') {
                    var checkbox = $(':checkbox', this);
                    checkbox.attr('checked', !checkbox.attr('checked'));
                    evt.stopPropagation();
                    return false;
                }
            });
        };

        $(document).ready(function() {
            cbFuncInit();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <div id="myDiv" style="background-color:red;height:50px;width:50px;">
        <asp:checkbox ID="Checkbox1" runat="server" ></asp:checkbox>
    </div>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>    
            <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <div id="myDiv" style="background-color:red;height:50px;width:50px;">
                <asp:checkbox ID="Checkbox1" runat="server"></asp:checkbox>
            </div>
            </ItemTemplate>
            </asp:Repeater>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1"/>
        </Triggers>
    </asp:UpdatePanel>

    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
    </form>
</body>
</html>

这是一个简化的隐藏代码:

protected void Button1_Click(object sender, EventArgs e)
{
    var list = new List<string> { "", "", "" };
    Repeater1.DataSource = list;
    Repeater1.DataBind();
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "", "cbFuncInit();", true);
}

问题是这样的:

该页面允许您单击 div 以单击其嵌套复选框。但是,当回发更多复选框,然后使用 ScriptManager.RegisterStartupScript 重新绑定(bind)事件时,原始 div 不再可单击,而新 div 则...

但是(情况会变得更好)...

当您再次单击该按钮时,所有 div 现在都可以单击...

但是等等...

当您第二次单击该按钮时,第一个 div 再次变得不可单击。

有人知道为什么吗?我想知道这是否与JQuery's event object有关。不幸的是,我的 JavaScript 调试技巧在这里有点落后。

最佳答案

如果不查看页面的实际版本,我不确定这里发生了什么,但当您重新绑定(bind)事件时,似乎会发生某种冲突。

您可以尝试的一件事是:

  • 首先用 jQuery 1.3 替换 jQuery 1.2.6
  • 然后将 $('div').click(function(evt){//此处的函数代码}) 替换为 $('div').live('click' ,function(evt){//这里是函数代码})

完成此操作后,您不需要使用 ScriptManager.RegisterStartupScript 重新绑定(bind)事件,因为事件将通过委托(delegate)捕获。通过回发不断添加新的复选框,事件将自动绑定(bind)...

希望能解决您的问题...

关于javascript - JQuery 事件在异步回发时不起作用,在第二次回发时修复,在第三次回发时中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1616349/

相关文章:

javascript - 包括需要很长时间才能加载,您可以看到它们正在加载

javascript - 选择文件时的操作

c# - 如何从具有不同内容的单个 Android 应用程序创建多个应用程序

c# - Asp Core 3 - 如何在 Controller 方法中允许可为空的 [FromBody] 对象

jquery - Slick Slider (Ken Wheeler) - 隐藏 slider 直到加载

jquery - jscrollpane 在 firefox 中不起作用,在 chrome 中起作用

javascript - 如何在 Highcharts 中设置默认多选?

javascript - 谷歌地图 api 点标记

javascript - 嵌套指令未显示。 AngularJS

c# - 在 RichTextBox 中显示按钮