Duplicated event listeners firing in repeater after data-reset

Ask the community
, ,
1

Question:
Is there a way to remove event listeners from a repeater before re-assigning data to it?

Product:
STUDIO

What are you trying to achieve:
I have a repeater on my page. I frequently reset this repeater using new data + 1 item from the original array, without refreshing the page.

The data reset is working fine. However, the onClick events seem to be duplicating.

In my repeater I have 3 buttons with onClick events, $item(‘#clickMeTest’), $item(‘#reassignData’), and $item(‘#resetBackToInitialData’).

1) I assign data to the repeater onReady.

Example data: A, B, C

I click clickMeTest on A, B, or C, and the event fires once, as expected

2) The user clicks reassignData on itemA in the repeater. I then reassign new data to the repeater PLUS the item they clicked

Example; user Clicks “A”

Example data assigned: A, D, E, F
(new data plus the item from the original array)

Now, all the onClick events fire TWICE for “A”, and ONCE for “D, E, F”.
Note: the data for A doesn’t show twice, only the event listeners are affected

3) I then put the data back to its original values with the button ‘resetBackToInitialData’

Example data: A, B, C

Now, the onClick event fires THREE times for “A”

Does anyone have any idea what’s going on? It’s driving me crazy!

This is a stripped down version of my code:

$w.onReady(async function () {
  
  const arrayIs = await getDataBackend();
  setUpRepeateritems(arrayIs);

});

$w.onReady(async function () {
  
  $w("#repeater1").onItemReady(async($item, itemData, index) => {

    $item('#clickMeTest').onClick(() => { 
      console.log("clicked");
    });

    $item('#reassignData').onClick(() => { 
      const arrayIs = await getNewDataPlusThisItem(itemData);
      setUpRepeateritems(arrayIs);
    });

    $item('#resetBackToInitialData').onClick(() => { 
      const arrayIs = await getDataBackend();
      setUpRepeateritems(arrayIs);
    });

  });

});

function setUpRepeateritems(arrayIs) {

  $w("#repeater13").data = [];
  $w("#repeater13").data = arrayIs; 

}
2

Hi, tom_a !!

I see. For now, please try doing it this way. :wink:

cited from : repeater introduction

$w.onReady(function () {
  $w("#repeatedContainer").onClick((event) => {
    const data = $w("#myRepeater").data;
    let clickedItemData = data.find(
      (item) => item._id === event.context.itemId,
    );
  });
});
3

Thanks, this worked!

1 Like