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 をクリックしたときに選択します。

    $('.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 に答える