Search code examples
javascriptjqueryhtmlpackery

Javascript .on function runs for all values a string variable has had, instead of only its current value

I'm using Packery JS to create a card lay-out. In this lay-out I move things around using the fit method. When the moving is finished I then scroll to the moved div; I wait for the fit complete event and then use jQuery's scrolltop to scroll to the div in question. This is the code I currently use for the scrolling part:

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

On the first click this works as intended, this is the output of moving div#vision:

scroll to: vision, position: 69

But on the second click (moving div#project-6) it goes wrong:

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

It first scrolls to project-6, but then immediately goes to the previous value of moveItem, vision. On subsequent clicks the list only gets longer.

So my question: Why is it remembering the previous values of the moveItem variable? And how can I stop it from doing that?

For context, this is the website I'm using it on. The code in question can be found by searching for "//Move function".

Thanks in advance!

Solution

  • This happens when you execute $container.packery( 'on', ...); several times. My guess is that you attach another event handler every time you click the button instead of attaching it once in the setup of the page and then make sure the event is triggered when the button is clicked.