Javascript .on函数运行一个字符串变量拥有的所有值，而不仅仅是它的当前值。

Question

我用Packery JS创建了一个卡片布局。在这个布局中，我使用拟合法来移动东西。当移动完成后，我滚动到移动的div；我等待配合完全事件，然后使用jQuery的滚动顶滚动到相关的div。这是我目前用于滚动部分的代码：

$container.packery( 'on', 'fitComplete', function () {
    $('html,body').animate({
        scrollTop: $("#" + moveItem).offset().top - 40
    });
    console.log("scroll to: " + moveItem + ", position: " +($("#"+moveItem).offset().top - 40))
});

在第一次单击此操作时，这是移动div#vision的输出：

scroll to: vision, position: 69

但是在第二次单击(移动div#project-6)时，就出错了：

scroll to: project-6, position: 616
scroll to: vision, position: 69

它首先滚动到project-6，然后立即转到moveItem的前一个值vision。在随后的单击中，列表只会变长。

那么，我的问题是:为什么它会记住moveItem变量的前几个值？我怎么才能阻止它这样做呢？

对于上下文，这是我要用的网站。通过搜索"//Move函数“可以找到所讨论的代码。

提前感谢！

Answer 1

当您多次执行$container.packery( 'on', ...);时，就会发生这种情况。我的猜测是，每次单击按钮时都会附加另一个事件处理程序，而不是在页面设置中附加一次，然后确保在单击按钮时触发该事件。

Answer 2

我会说得更具体些。将此功能更改为：

                //Move Function
            var moveThis = function(moveItem, moveTarget){
                if (moveTarget == "stamp" && $("#" + moveItem).hasClass("w2") && 720 < window.innerWidth && window.innerWidth < 992) {
                    var targetX = 0;
                    var targetY = $("#stamp").height() + 40;
                    $container.packery('fit', document.getElementById(moveItem), targetX, targetY);
                } else if (moveTarget == "stamp") {
                    var arrayList = $container.packery('getItemElements')
                    var targetX = $(arrayList[0]).position().left
                    var targetY = $(arrayList[0]).position().top
                    $container.packery('fit', document.getElementById(moveItem), targetX, targetY);
                } else {
                    var arrayList = $container.packery('getItemElements')
                    positionList = arrayList.indexOf(document.getElementById(moveTarget))
                    var targetX = $(arrayList[positionList+1]).position().left
                    var targetY = $(arrayList[positionList+1]).position().top
                    $container.packery('fit', document.getElementById(moveItem), targetX, targetY);
                }

            };

该代码必须在全局定义的某个地方失效：

 $container.packery( 'on', 'fitComplete', function ( moveItem ) {
                    $('html,body').animate({
                        scrollTop: $("#" + $(moveItem.element).attr('id')).offset().top - 40
                    });
                    console.log("scroll to: " + $(moveItem.element).attr('id') + ", position: " +($("#"+moveItem).offset().top - 40))
                });

关于$(moveItem.element).attr('id')，我不太确定--看看它有什么