Trigger different events via HTML element using data-click-target

App Building
1

Similarly to the following question:

Trigger events via HTML element

I want to have two elements in my custom HTML component which have the data-click-target attribute. How can I differentiate between them so I can trigger events based on that?

For instance; data-click-target="primary" and data-click-target="secondary".

How can I trigger utils.confetti() for the primary value and fetchData.trigger() for secondary?

Basic example:

<div ... data-click-target="primary">
  Confetti
</div>
<div ... data-click-target="secondary">
  fetchData
</div>

image

At the moment, they both trigger the same events (plural).
Clicking 'Confetti' triggers:

utils.confetti();
getSite.trigger();

Clicking 'fetchData' triggers:

utils.confetti();
getSite.trigger();

Which isn't what I wanted.

How can I separate these two events?

2

In your click event handler you can check what was clicked using the target.type property and use that to decide what to trigger. e.g. "only run if" {{target.type === 'primary'}}

2 Likes
3

Works like a charm.

Thanks

2 Likes
4