ここにある解決策を試しました: JavaScript ループに遅延を追加するにはどうすればよいですか? しかし、私はそれをうまく機能させることができませんでした。
jQuery.fn.createEntry = function () {
$("#List").append('<span>New Entry</span>');
$("#List span").draggable({ grid: [30,45] });
}
jQuery.fn.tenTimes = function() {
for (var i = 1; i <= 10; i++){
$(document).createEntry();
}
}
.createEntry() スクリプトでは、新しいオブジェクトは私が持っている .draggable() プラグインにバインドされています。この tenTimes function() を実行するために、キーボード ショートカット (keyup) を使用しています。キーをすばやく 2 回以上押すと、新しいオブジェクトの多くがドラッグできなくなります。どのオブジェクトがドラッグ可能にならないかは一見ランダムです。おそらく、キーをすばやく押すと、失敗したもののバインドイベントが中断されると思いましたが、ゆっくり行っても、ドラッグ可能にならないものもあります。
forループに進む前に、オブジェクトが適切にバインドされているかどうかを確認する方法はありますか? 厳密により良いアプローチはありますか?残念ながら、これはアニメーションではないため、.delay() は使用できません。
解決
appendTo() を使用して要素を処理し、問題を引き起こしたのは、私が行った 3 番目のスクリプトでした。
append() または appendTo() を使用すると、オブジェクトがドラッグ可能にバインドされたままになるように見えましたが、途中で左側/上部の css が失われるため、ドラッグできません。いくつかの .css() ハック (値はそれぞれに固有です) を理解するのではなく、まったく新しい要素を作成し、関連するデータをコピーしてから、古いものを remove() しました。Draggable は、別のポイントで適切にバインドされます。これで問題は解決しました。