Question

我有以下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赋值失败的问题。

Answer 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>

在ASP.NET中的部分回发之后，jQuery addClass丢失了

1 个答案: