javascript - 访问新创建的 DOM 元素以进行循环

Question

我正在使用 jQuery sortable + jQuery draggable 来组合一个页面，该页面可以在幻灯片中添加和删除图像。我现在已经设置好了，这样我就可以拖入新屏幕并将它们放入我想要的命名序列中，它会创建我需要的 DOM 元素。

我成功地扫描页面以查找必要的元素并将它们提交到一个数组，但它从未获取新添加的项目。因此，例如，我有以下元素开始:

<h3 data-sequence-title="sequence1">Sequence 1</h3>
<ul class="sortable connectedSortable ui-sortable">
    <li data-screen="screen1">Screen 1</li>
    <li data-screen="screen2">Screen 2</li>
    <li data-screen="screen3">Screen 3</li>
</ul>

...然后我添加一行:

<h3 data-sequence-title="sequence1">Sequence 1</h3>
<ul class="sortable connectedSortable ui-sortable">
    <li data-screen="screen1">Screen 1</li>
    <li data-screen="screen2">Screen 2</li>
    <li data-screen="screen3">Screen 3</li>
    <li data-screen="screen4">Screen 4</li>
</ul>

jQuery 只会返回第一个元素，不会返回更新后的元素。这是我正在使用的 js:

$( document.body ).on('click', '.submit', function(){

    // Build nested array from DOM elements
    var jsonObj = [];    

    $('.sortable').prev('h3').each(function(){
        var obj = {
            title: $(this).data("sequence-title"),
            Screens: []
        };

        $(this).next("ul").children('li').each(function() {
          obj.Screens.push({
              image: $(this).data("screen")
          });
        });

        jsonObj.push(obj);
    });

});

添加新 LI 的代码:

// Initialize draggable / droppable functionality
$('.sortable').sortable({
    placeholder: 'ui-state-highlight',
    revert: true
});
$('.draggable li').draggable({
    connectToSortable: '.sortable',
    helper: 'clone',
    revert: 'invalid'
});
$('.sortable').disableSelection();

我需要返回修改后的 DOM，而不是加载页面时存在的元素。

Answer 1

将元素添加到 sortable 后，您必须更新组件:

$(".sortable").sortable("refresh");