0

これが私のページの簡略版です：

<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を使用してイベントを再バインドすると、元のdivはクリックできなくなりますが、新しいdivは...

しかし（それは良くなる）...

ボタンをもう一度クリックすると、すべてのdivがクリック可能になります...

ちょっと待って...

ボタンをもう一度クリックすると、最初のdivが再びクリックできなくなります。

誰もが理由を知っていますか？JQueryのイベントオブジェクトと関係があるのだろうかと思っていました。残念ながら、私のJavaScriptデバッグスキルはここでは少し優れています。

4

1 に答える 1

2

ページの実際のバージョンを見ないと、ここで何が起こっているのかわかりませんが、イベントを再バインドすると、何らかの競合が発生しているようです。

試すことができることの1つは次のとおりです。

  • まず、jQuery1.2.6をjQuery1.3に置き換えます
  • そして、と置き換え$('div').click(function(evt){//function code here})ます$('div').live('click',function(evt){//function code here})

これを行ったら、ScriptManager.RegisterStartupScriptを使用してイベントを再バインドする必要はありません。これは、イベントが委任によってキャプチャされるためです。ポストバックを介して新しいチェックボックスを追加し続けると、イベントは自動的にバインドされます...

それがあなたの問題を解決することを願っています...

于 2009-10-24T01:01:41.973 に答える