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

【问题标题】：jQuery addClass Lost after Partial Postback in ASP.NET在 ASP.NET 中部分回发后 jQuery addClass 丢失
【发布时间】：2013-02-14 18:26:27
【问题描述】：

我有以下 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分配丢失的问题。

【问题讨论】：

如果你给元素 1 添加一个类并用元素 2 替换元素 1，元素 2 将没有你添加到元素 1 的类。 addClass 分配不会丢失，你只是替换元素完全由一个新元素组成，该元素还没有该类。
@KevinB 我没有关注你，如果我只在点击事件中添加这一行： $(this).addClass('SelectedMail');它仍然具有相同的效果。
@Kevin B 请注意，如果我使用 .css 属性更改文本的颜色，它仍然会产生相同的效果，我认为我的代码没有错，我认为它有问题部分/回发。
这样想……如果你有一篮子苹果，拿出一个，你就有一个苹果。你咬一口那个苹果。如果你把那个苹果扔掉然后再拿一个，新苹果不会被咬一口。这就是这里发生的事情。元素 1（您在单击时添加类的那个）不再存在，它已被元素 2 完全替换。元素 2 尚未被单击，因此它还没有类。
@Kevin B 感谢您的帮助，我从一开始就了解到，在每次回发时，元素都会被替换，我想这是怎么回事？如果是这样，您知道我该如何解决这个问题吗？谢谢。

标签： jquery asp.net asynchronous updatepanel postback

【解决方案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>

【讨论】：

您所做的将在回发后丢失脚本后恢复它们，但我的问题是，在我使用 addClass 函数将类分配给 div 后，一旦发生部分回发，元素就会重新创建，因此分配的课程不再存在。我需要找到一种方法来做到这一点。