web-dev-qa-db-ja.com

jQuery UIでアコーディオンウィジェットに要素を動的に追加および更新する

いくつか質問 ここでSOこれを参照 open jQuery UI feature request 動的に追加/削除する機能アコーディオンウィジェットのパネルです。チケット自体はマークされており（クローズ機能：修正済み）、そして ユニットテスト からわかることと、Gitリポジトリからのプルにより、最新リリースに実装されているようです。

ただし、上記の単体テストで行ったようにdivを追加しようとすると、次のようになります。

var element = $("#accordion");
$("#accordion").append("<h3>3</h3><div>3</div>");
$("#accordion").accordion("refresh");

動作しません。

ただし このメソッド は機能します：

$("#accordion").append("<h3>sec</h3<div>test</div>").accordion("destroy").accordion();

しかし、アコーディオンを「破棄」するのではなく、要素を追加（または先頭に追加）して更新するだけです。

Chromeのインスペクターで追加したdivを見ると、追加した要素に他のアコーディオンと同じCSSスタイルが追加されていないことがわかります。

enter image description here

jqueryjquery-uiaccordionjquery-ui-accordion
15
Jack

unibasilは正しいです。jQueryUI 1.10.0が refresh メソッドを更新して、この動作を許可するようになりました。

これが1.10.0 changelog 更新に関するメモです。

更新メソッドは、追加または削除されたパネルを認識するようになりました。これにより、マークアップを解析して変更を見つけるタブやその他のウィジェットと同じようにアコーディオンがもたらされます。

セットアップ

<div class="questions">
    <div>
        <h3><a href="#">Question 1. My First Question ?</a></h3>
        <div>
            First content<br />
        </div>
    </div>
</div>
<div>
    <button id="addAccordion">Add Accordion</button>
</div>

Javascript

$('#addAccordion').click( function() {
    var newDiv = "<div><h3>Q2 New Question</h3><div>New Content</div></div>";
    $('.questions').append(newDiv)
    $('.questions').accordion("refresh");        
});

例

jsFiddle古いアコーディオンを破棄せずに、その場で新しいアコーディオンを追加できることを示しています。

30
Jerry

Jarek に感謝！私の場合、divを囲まなくても機能します。 divにより、次のアコーディオンが作成されます。

$('#addAccordion').click( function() {
  var newDiv = "<h3>Q2 New Question</h3><div>New Content</div>";
  $('.questions').append(newDiv)
  $('.questions').accordion("refresh");
});
5
Plch

実際に議論された動作はjQuery UI 1.10.0に含まれて（ちょうど released ）、私には問題なく動作します。

1
unibasil