scriptの実行タイミング?の理解がいまいちなので質問します
やりたいこと
jQueryのsortableを使ってリストの並び替えを行う。
その後リストの並びをリセットするためにinnerHTMLを使ってリストを初期状態で上書きする。
概要
(プログラム例
javascript
1<head> 2<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 3<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 4<script> 5 $(function(){ 6 $("#sortable").sortable(); 7 }); 8 var a='<ul id="sortable"><li>1</li><li>2</li><li>3</li></ul>'; 9</script> 10</head> 11 12<body> 13<div> 14<ul id="sortable"> 15 <li>1</li> 16 <li>2</li> 17 <li>3</li> 18</ul> 19</div> 20<input type="button" value="reset" onclick="document.getElementsByTagName('div')[0].innerHTML=a"> 21<input type="button" value="sortable" onclick='$(function(){$("#sortable").sortable();})'> 22 23</body>
ごそっと<ul>...</ul>をresetボタンを押してリセットした場合、並び替えができなくなります。
対策
- 根本的な対策として、そもそも<ul>下の<li>の部分だけ書き換えれば良いということはわかっています。
- 別のやり方として試しに、sortableボタンを作って、押したら下記scriptを走らせるようにしたら、並び替えができるようになりました。
javascript
1$(function(){ 2 $("#sortable").sortable(); 3 });
質問
仮に<ul>...</ul>全体を書き換える場合、2. の対策以外にスマートなやり方はありますか?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/13 08:43