Событие JQuery не работает при асинхронной обратной передаче, фиксируется на 2-й обратной передаче, прерывается на 3-й - PullRequest
0 голосов
/ 24 октября 2009

Вот упрощенная версия моей страницы:

<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 ... ... 1009 *

ОДНАКО (становится лучше) ...

Если вы нажмете кнопку еще раз, все элементы div теперь будут активными ...

НО ЖДУ ...

При повторном нажатии кнопки первый div снова не активируется.

Кто-нибудь знает почему? Мне было интересно, связано ли это с объектом события JQuery . К сожалению, мои навыки отладки JavaScript здесь немного превосходят. Спасибо за любые ответы.

1 Ответ

2 голосов
/ 24 октября 2009

Я не уверен, что здесь происходит, не глядя на реальную версию страницы, но кажется, что при повторном связывании событий возникает какой-то конфликт.

Одна вещь, которую вы можете попробовать:

  • Сначала замените jQuery 1.2.6 на jQuery 1.3
  • А затем заменить $('div').click(function(evt){//function code here}) на $('div').live('click',function(evt){//function code here})

Как только вы это сделаете, вам не нужно , чтобы использовать ScriptManager.RegisterStartupScript для повторной привязки событий, поскольку события будут захвачены с помощью делегирования. Продолжайте добавлять новые чекбоксы с помощью обратной передачи, и события будут связаны автоматически ...

Надеюсь, что решит вашу проблему ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...