简体   繁体   English

jQuery事件不适用于异步回发,固定于第二次回发,于第三次中断

[英]JQuery event not working on async postback, fixing on 2nd postback, breaking on 3rd

Here is a simplified version of my page: 这是我页面的简化版本:

<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>

Here's a simplified code-behind: 以下是简化的代码:

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);
}

Here's the problem: 这是问题所在:

The page allows you to click a div in order to click its nested checkbox. 该页面允许您单击div以便单击其嵌套的复选框。 However, when doing a postback to great more checkboxes, then using ScriptManager.RegisterStartupScript to rebind the events, the original div is no longer clickable, while the new divs are... 但是,当回退到更多复选框时,然后使用ScriptManager.RegisterStartupScript重新绑定事件时,原始div不再是可单击的,而新div是...

HOWEVER (it gets better)... 但是(变得更好)...

When you click the button once more, all the divs are clickable now... 当您再次单击按钮时,所有div现在都可以单击...

BUT WAIT... 可是等等...

When you click the button a second time, the first div is once again, no longer clickable. 当您再次单击该按钮时,第一个div再次变为不再可单击。

Anyone know why? 有人知道为什么吗? I was wondering if it had to do with JQuery's event object . 我想知道它是否与JQuery的event object有关 Unfortunately my JavaScript debugging skills are a bit outmatched here. 不幸的是,我的JavaScript调试技能在这里有些无法比拟。

I'm not sure what is going on here without looking at an actual version of the page, but it seems like there is some kind of conflict happening when you rebind the events. 我不确定在不查看页面的实际版本的情况下是怎么回事,但是当您重新绑定事件时,似乎发生了某种冲突。

One thing you can try is: 您可以尝试的一件事是:

  • First replace jQuery 1.2.6 with jQuery 1.3 首先用jQuery 1.3替换jQuery 1.2.6
  • And then replace $('div').click(function(evt){//function code here}) with $('div').live('click',function(evt){//function code here}) 然后将$('div').click(function(evt){//function code here})替换$('div').live('click',function(evt){//function code here})

Once you have done that, you do not need to use ScriptManager.RegisterStartupScript to rebind the events, as the events will be captured via delegation. 完成此操作后, 无需使用ScriptManager.RegisterStartupScript重新绑定事件,因为事件将通过委派来捕获。 Keep adding new checkboxes via postback, and the events will be bound automatically... 继续通过回发添加新的复选框,事件将自动绑定...

Hope that solves your problem... 希望能解决您的问题...

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM