在ASP.NET中部分回发后jQuery addClass丢失

I have the following HTML:

我有以下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>

I use the following script to select the div when I click on it: This script first removes all the "SelectedMail" classes from all the divs and then adds the "SelectedMail" class to the selected div.

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

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

Here's the CSS:

这是CSS：

    .SelectedMail {
        background-color:#f5f5f5;
    }

The Problem that after a postback occurs somehow the addClass assignment of jQuery is Lost.

问题在回发后以某种方式发生jQuery的addClass赋值是Lost。

1 个解决方案

#1

This is a common problem caused by mixing the conventional ASP.Net Ajax and jQuery events. When you do the partial postback, the DOM is recreated and the jQuery events are lost.

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

Try registering your jQuery event this way:

尝试以这种方式注册您的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>

#1