1

我有以下 HTML：

        <asp:UpdatePanel ID="upPanelA" runat="server" > 
            <ContentTemplate>

    <ul class="MailBoxesItems">
        <li>
            <div id="InboxSelection" runat="server" class="MailLinkContent" >
            </div>
        </li>
        <li>
            <div id="UnreadSelection" runat="server" class="MailLinkContent">
            </div>
        </li>
        <li>
            <div id="SentSelection" runat="server" class="MailLinkContent">
            </div>
        </li>
    </ul>

      </ContentTemplate>
        </asp:UpdatePanel>

当我单击它时，我使用以下脚本来选择 div：此脚本首先从所有 div 中删除所有“SelectedMail”类，然后将“SelectedMail”类添加到选定的 div。

    $('.MailBoxesItems li div.MailLinkContent').click(function () {
        $('.MailBoxesItems li div.MailLinkContent').removeClass('SelectedMail');
        $(this).addClass('SelectedMail');
    });

这是CSS：

    .SelectedMail {
        background-color:#f5f5f5;
    }

以某种方式发生回发后，jQuery 的 addClass 分配丢失的问题。

4

1 回答 1

1

这是由于混合传统的 ASP.Net Ajax 和 jQuery 事件而导致的常见问题。当您执行部分回发时，将重新创建 DOM 并丢失 jQuery 事件。

尝试以这种方式注册您的 jQuery 事件：

<script type="text/javascript">
    // the event binding is wrapped in a function avoiding code replication
    function bindEvents() {
        $('.MailBoxesItems li div.MailLinkContent').click(function () {
            $('.MailBoxesItems li div.MailLinkContent').removeClass('SelectedMail');
            $(this).addClass('SelectedMail');
        }); 
    }

    // bind the events (jQuery way)
    $(document).ready(function() {
        bindEvents();   
    });

    // attach the event binding function to every partial update
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(evt, args) {
        bindEvents();
    });

</script>
于 2013-02-14T19:43:24.437 回答