Track Dynamically Loaded DOM Node

[bkmills1]

Hello,

I'm trying to track clicks on a DOM node that is dynamically loaded and subsequently removed after 4 seconds. It is likely that a user will not click on a button until well after the node has been removed.

Is there a way to determine that a node was in the markup after it's been removed? Basically, I want to run the following code and determine that ".tagg-balloons-wrapper" was on the page:

    jQuery('.htl-search.button-mobile').on('click', function() {     

       // If message is present

        if (jQuery('.brandLogoNavWrapper .tagg-balloons-wrapper').length >= 1) {

            if (typeof adobe == 'object') {

                adobe.target.trackEvent({mbox: 'mboxClickTrack', params: {'clicked': 'taggstar_only'}});

            } else {

                mboxFactoryDefault.getSignaler().signal("abt", "mboxClickTrack", "clicked=taggstar_only");

            }

        }     

    });

I'm not very familiar with using addEventListener() or MutationObservers, though it seems this is the route I need to take.

Thank you in advance for your help!

- Brion

[manisha17383587 · Accepted solution]

Hi Brion,

Please check below link how you can Detect DOM changes with Mutation Observers

https://developers.google.com/web/updates/2012/02/Detect-DOM-changes-with-Mutation-Observers

Hope that helps

Thanks,

Manish Agravat

[bkmills1]

Thank you Manisha!

Though this was a while ago, we were able to resolve our issue by using MutationObserver.