Which of the following 2 is the preferred way to handle click events on repeaters?

Ask the community
,
1

I have a button ‘#btn1’ in a repeater. There are 2 ways to handle a click event for that button.

  1. From the event handlers panel on the right, create a binding for the #btn1 which will create a export function btn1_click(). This is probably the usual method for handling most events.

  2. Or handle it inside the $w.onReady() as follows:
    $w.onReady(function () {
    …
    $w(“#btn1”).onClick((event) => {
    …
    })
    })

    This is somewhat unusual but works for some reason. I do not fully understand the logic behind it even though I have used this method in the code.

My first question is: What is the difference between the 2 methods and which one is the preferred method for use in repeaters?

My second question is: Does the $w.onReady() get called every time I click on something on the page? If not how does it know to reach the onClick() code when I click on something?

2

Both methods are equivalent. All they do is define the function (event handler) to be called when an event is triggered.

The $w.onReady() function is called once, when the page is ready. If the onClick() code is defined in the onReady() function, then that means the onClick() code is defined for the page, and will be invoked whenever the onClick event is triggered for that element.

For more information about the page onReady() function, see the following:

3

There’s actually another way to handle a click event in a Repeater, and that’s to define the click event in the Repeater’s onItemReady() function. See the second code snippet example in the onItemReady() API .

4

Thank you. I thought I read somewhere that creating an event handler through the right panel for a button on a repeater will take more time loading since it tries to do the binding for each button. And if you have the onClick in the $w.Ready() the repeater will load faster. I will have to find that article. After reading that article I started moving some of the event handlers to the $w.Ready() function.

I think this article is the one I saw.