jQuery在拖动时更新DOM答案

【问题标题】：jQuery updating DOM while draggingjQuery在拖动时更新DOM
【发布时间】：2019-07-11 07:58:29
【问题描述】：

我正在使用 jquery-ui 可排序，我的想法是对滚动时出现的项目应用排序。我正在使用以下代码：

  var gridTop = 0,
        gridBottom = container.outerHeight();
   $('#play-list').on('scroll', function () {
        $('#play-list li:not(.selectableHide):not(.sorting-initialize)').each(function () {
            var thisTop = $(this).offset().top;
            if (thisTop >= gridTop && (thisTop + $(this).height()) <= gridBottom) {
                if ($(this).attr('data-hour') != houseScope) {
                    houseScope= $(this).attr('data-hour');
                    console.log(houseScope);
                }
                $(this).addClass("sorting-initialize");
                var waitInterval = setInterval(() => {
                    timeout += timeout;
                    if (timeout == 300) {
                        clearInterval(waitInterval);
                        $('#play-list .sortable').sortable('refresh');
                        timeout = 10;
                    }
                }, timeout);
            }
        });
    });

我添加了一个日志来检查我当前在播放列表中滚动的时间。简单滚动时一切正常，但是当我拖动一个元素并在拖动它的同时滚动时，我可以看到小时仍然正确更改，但没有添加“排序初始化”。

编辑：经过进一步调试，我现在看到问题不在于没有添加类，而是在拖动时没有更新 DOM。我可以在 Chrome 的控制台中看到（检查元素已打开）正在添加该类，但 DOM 在其先前的状态中“冻结”，直到拖动结束，所以我不能将元素放在新的可排序元素上。有什么解决办法吗？

谢谢

【问题讨论】：

你确定滚动元素是'container'而不是'body'？
是的，它是页面内的一个可滚动的 div

标签： javascript jquery jquery-ui

【解决方案1】：

jQuery 适用于加载的 DOM。如果您想对动态数据使用“on”事件，则必须将其锚定到现有的 DOM 元素。

尝试使用

$('body').on('scroll', '#play-list', function () {...

你可以用'#play-list' div的父容器ID来改变'body'标签

【讨论】：

'#play-list' 是一个现有的 DOM 元素。无论如何我尝试在父容器上使用'on'，这里同样的问题