Adobe Experience Fragments - Event Handlers Not Consistently Being Attached When Injected by Target

[KMarchewa]

Hello all:

We have an Experience Fragment that utilizes custom AEM Components. Some of the elements in one of these Components get an event handler attached to them through a "clientlib" JS script in AEM. When using these Components through AEM, the event handlers are attached consistently and the code works as expected.

The issue arises when we export the XF to Target and use it in an Activity. Approximately 90% of the time, the code works fine. The events are attached and client-side behavior is as expected. However, a minority of the time, we noticed that an element was not responding to user interaction as expected. After some troubleshooting, I found that this was because the Event Handlers from the JS script were not being attached even though the JS script was properly loaded in the page.

I assume it is a timing issue; e.g. the Component does not exist at the time the JS script attempts to attach the Event Handler. Is there any way to troubleshoot or potentially fix this issue (i.e. through an AEM setting or Target) without touching the JS code itself?

[arunpatidar]

Hi,

If you are using jquery then this is the preferred way to bind to an existing or yet-to-exist element.

$('#newLinks').on("click", 'a', function() {
  alert("clicked");
});

https://api.jquery.com/on/

[KMarchewa]

Thanks for the response. I understand there are ways to modify the JS to address this, but is there anyway to do so without modifying that JS directly; for example, controlling when the XF gets injected, etc.

[arunpatidar]

Hi,

I am not sure if you can load Target data as part of the source but I think it is loaded asynchronously.

and Asynchronous call requires race condition handling.