[jQuery UI] sortableを使いajax後に再表示した項目が動かない

jQuery UIの sortableを使い、テーブルの行を並べ替えてajaxでPHPに送りDBを更新して並び順を再表示するプログラムを作っています。

Ajax前のページでは行が動き、動かした結果をDBに登録しajaxで再表示することはできたのですが、Ajax後に再表示されたテーブルの行が sortableで動かない状態になってしまっています。

原因は
・最初にページを開いてテーブルが表示され、その後 sortableがjQueryで適応
・再表示のときはテーブルが表示されるが、 sotableが再度読み込まれないので適応されない
ことのような気がしていますが、２度目の表示のときにどのように sotableを再読み込みして動くよにすれば良いかわかりませんので教えていただければと思います。


「作成しているjQueryのソース」
<script type="text/javascript">
$(function () {
$('#sortable tbody').sortable();
$('#sortable').disableSelection();

$('#submitSortable').click(
function (e) {
e.preventDefault();
　　　　　 //行の並び順をカンマ区切りで変数 itemIDsに入れる処理（省略）
});
$.ajax({
type: 'post',
url: 'url',
data: {
'pd': itemIDs,
},
success: function (data) {
$("#ajax").html(data);
}
});
}
);
});
</script>

No.1 ベストアンサー 回答者： fujillin 回答日時： 2015/09/10 18:06

こんにちは。

sortableを使ったことが無いし、検証もしていませんので確実ではありませんが・・・

ajaxで置き換えている、#ajax要素の中に#sortableの要素がある構成になっているのでしょうか。
同じタグやidの要素で置き換えたつもりでも、ブラウザ側では、「以前の要素を削除して、新しい（別の）要素を追加した」ものとして扱われます。
それなので、最初に定義したsortableの機能は削除された要素に対して定義されていて、新しく追加したものには何の定義もされていないことになります。
・・・ということが原因であることは、わかっていらっしゃると思います。

対応として思いつくのは2通りの方法があります。

1）元の要素構造をそのままにしておく
　要は、html()メソッドでバッサリ入れ替えてしまうのではなく、各セルの内容だけを順次書き換える方法です。
　これなら、最初に定義されている機能は生きているはずなので、そのままで使えると思います。
　場合によっては行ごとバッサリ入れ替えてもいけるかもしれません。
（sortableの内部処理がどのようになっているかによるので、正確にはわかりませんが）

2）書き換えた時に再定義する（ご質問ではこちらをお求めのようですが）
　基本的に初期設定と同じスクリプトを、書き換え後に実行すれば良いはずです。
　2度同じ記述をするのが嫌であれば、sortableの設定部分を関数化しておいて、ロード時、書き換え時に呼び出すようにすれば良いでしょう。
　ただし、以前の定義がそのまま蓄積されてしまう（使われることはないのですが）可能性がありますので、書き換え前にsortableの以前の機能をキャンセルしておく方が良いと思われます。
　apiのメソッドを見てみると、幸いdestroyメソッドが用意されているようです。
http://api.jqueryui.com/sortable/

＞　　$("#ajax").html(data);
　の前に一旦キャンセルをして、書き換え後に再定義の関数を呼び出すといった手順で可能ではないかと思います。

この回答へのお礼

fujillin様

こんにちは。ご回答ありがとうございます。
2)の方法でうまくいきました。

ajaxのsuccess部分でhtml(data)を出力した後に sortable()とdisableSelection()を関数化したものを実行するようにプログラムを変更しました。

destroyしなくても求める動きを得ることができましたが、今後の為にdestroyの使い方も学んでみます。

お礼日時：2015/09/10 21:31