私のページで JQuery-UI インタラクションを動作させるのに少し問題があります。私は以前に JQuery-UI を使用したことがないので、後でドラッグ アンド ドロップしてソートできるようにすることを期待して、ソート可能な相互作用を試すことから始めました。しかし、私は頭を壁にぶつけていて、ソート可能な作業さえできませんでした。
並べ替えようとしているコンテンツは、ajax で動的に読み込まれています。コンテンツがどのように見えるかを以下に示します。
<ul id="category_list">
<li class="category" data-category-id="17">Education</li>
<li class="category" data-category-id="20">General Information</li>
<li class="category" data-category-id="14">Music / Movies / Television</li>
<li class="category" data-category-id="18">Navigation</li>
<li class="category" data-category-id="19">Retailers</li>
<li class="category" data-category-id="16">Social Media</li>
<li class="category" data-category-id="15">Web Results</li>
</ul>
この JQuery 関数はデータをロードします。
// load all the engines in a category
$('#container').on("click", ".buttonclass", function() {
$.get("/categories", {
id : $(this).attr('data-id')
}, function(data) {
var pane = $("#categories").data('jsp');
pane.getContentPane().html(data);
pane.reinitialise();
});
});
(ペイン関連のものは、これが JScrollPane によってスクロール可能であるためです)。上記のこの関数にコードを追加して、リスト要素をソート可能にしようとしましたが、何も機能しません。私が試したいくつかのことは次のとおりです。
$('.category').sortable();
...
$('.category'.each(function(){$(this).sortable()};
...
$("#category_list").sortable();
...
$('.category').sortable('refresh');
...
$('.category'.each(function(){$(this).sortable('refresh')};
...
$("#category_list").sortable('refresh');
($.get の) コールバック関数内とその後の両方で、on click ハンドラーにコードを追加しようとしましたが、うまくいきませんでした。
ページ (JscrollPane 内) にハードコーディングされた静的データは、並べ替えに問題はありません。動的コンテンツだけが問題を引き起こしています。
どんな助けでも大歓迎です。