在 AJAX 请求后初始化新的 Bootstrap 手风琴而不影响其他手风琴的问题答案

【问题标题】：Problems initializing new Bootstrap accordion after AJAX request without affecting other accordions在 AJAX 请求后初始化新的 Bootstrap 手风琴而不影响其他手风琴的问题
【发布时间】：2018-04-23 19:46:56
【问题描述】：

我已经研究了几个小时，发现了许多类似的问题，但没有一个能满足我的确切要求或有适合我的解决方案...

我正在创建一个具有两个 Bootstrap 手风琴的响应式布局。更改第一个手风琴中的选择应该使用 AJAX 刷新第二个手风琴。我正在使用 ASP.Net Core MVC，但这个问题涉及 JQuery 和 Bootstrap，并且很可能在各种框架上重现。这是 HTML 的简短版本：

// most of this is omitted for brevity
<html>
    <head>...</head>
    <body>
        <div class="row">
            <div class="col-md-6 col-xs-12">
                @await Html.PartialAsync("_AccordionOne", Model)
            </div>
            <div class="col-md-6 col-xs-12" id="ajax-container">
                @await Html.PartialAsync("_AccordionTwo", Model[0])
            </div>
        </div>
    </body>
</html>

然后我初始化手风琴，监听手风琴一的变化，并根据需要使用 JQuery 刷新手风琴二的局部视图：

$(function () {
    var selectedId = 0; // track which record in the first accordion is selected

    // this is needed to style accordions and make them work - I'm not 100% sure how it works, though.
    // obviously this runs only once on document load and does not help me after an AJAX request.
    $('.accordion').accordion({
        collapsible: true
    });

    // detect when selection from first accordion has changed - refresh second accordion using AJAX
    $('#accordion-one').on('click', 'h5.ui-accordion-header', function (e) {
        try {
            var newSelectedId = $(e.target).closest('h5').data('myRecordId');

            if (selectedId !== newSelectedId) {
                // user made a new selection - refresh second accordion using AJAX
                selectedId = newSelectedId;

                $('#ajax-container').load(encodeURI('/MyController/MyAction?myID=' + newSelectedId), function (data) {
                    // choose the active panel on accordion two
                    var activePanelIndex = 0;
                    for (var i = 0; i < thisPartWorksFine.length; i++) {
                        if (myModel.myItems[i].isSelectedProposal) {
                            activeDealIndex = i;
                        }
                    } 

                    // this part ran on document.ready, but needs to be called again after an AJAX request.
                    // if I leave this out, CSS is not applied to the new accordion two content and accordion two stops working.
                    // however, if I do it this way, ALL accordions are refreshed and the state of accordion one is wrong.
                    $('.accordion').accordion({
                        collapsible: true,
                        active: activeDealIndex
                    });
                });
            }
        } catch(err) {
            // error handling
        }
    });
});

我的问题是我需要在 AJAX 请求或手风琴二停止工作后第二次调用$('.accordion').accordion();。但是，如果我这样称呼它，它会破坏手风琴的状态。我想做这样的事情来只初始化手风琴两个，但我还没有找到让它工作的方法：

// does not work - css not applied and accordion breaks
$('#ajax-container.accordion').accordion({
        collapsible: true
});

// also does not work
$('#ajax-container').children('.accordion').accordion({
        collapsible: true
});

提前感谢您的任何建议！

【问题讨论】：

你为什么不使用this或其他一些相对的选择器？
@isherwood 这需要在('#ajax-container').load() 成功回调中运行...我不确定this 在该代码块中的上下文是什么。你可能走在正确的轨道上，但我无法想象如何利用我的优势。
我帮不上什么忙，因为我不了解asp.net。我认为您可以简单地将外部 one() 方法的 ID 携带到 ajax 回调中。

标签： jquery twitter-bootstrap asp.net-core-mvc

【解决方案1】：

我不确定我尝试的所有不同选择器出了什么问题，但像往常一样，我让事情变得比他们需要的更难。我所要做的就是找到带有 class="accordion" 的手风琴二的 div 并给它一个 ID，以便更容易参考：

<div class="accordion" id="accordion-two">...</div>

然后下面的代码按预期工作：

$('#accordion-two').accordion({
    collapsible: true,
    active: activeDealIndex
});

【讨论】：