vendredi 19 novembre 2021

JavaScript: Listener Not Attaching To Overlay Element But Code Works When Run From Console

I don't know why my listener is not working when running in the web app? Below is the button code:

<button class="md-raised md-primary hpm-button md-button md-ink-ripple flex" type="submit" ng-transclude="" id="id_recaptcha" flex="" ng-disabled="paymentModalCtrl.disableButton()" ng-class="paymentModalCtrl.setting.captcha.enabled? 'g-recaptcha': ''" aria-live="polite" style="margin-left:0px; margin-right:0px;">
    <div layout="row" layout-align="center center" class="ng-scope layout-align-center-center layout-row">
        <span class="ng-binding">Pay 100.00 USD</span>
        <div flex="5" class="flex-5">&nbsp;</div>
        <div layout="row" layout-align="space-around" class="layout-align-space-around-stretch layout-row">
            <!-- ngIf: paymentModalCtrl.processing -->
        </div>
    </div>
    <div class="md-ripple-container"></div>
</button>

and here is part of the tracking code:

function _dtmMonitorCCPayButton() {
    console.log("#1 TRACKING CC BUTTON");
    if (!sessionStorage.hasOwnProperty('_dtmOaoFundingComplete')) {
        _dtmTrackCCPayButton();
        setTimeout(_dtmMonitorCCPayButton, 3000);
    } else {
        return;
    }
};

function _dtmTrackCCPayButton() {
    console.log("#2A Listener running for pay button");
    var buttonCC = document.querySelector('button.md-raised.md-primary.hpm-button.md-button.md-ink-ripple.flex');
    if (buttonCC != null) {
        console.log("#2B Listener is attached to pay button");
        document.querySelector('button.md-raised.md-primary.hpm-button.md-button.md-ink-ripple.flex').addEventListener('mousedown', _dtmTrackFundingComplete);
    }
};

This is for an overlay that appears once a user selects an amount on the base page. My code starts running as soon as the page loads and the overlay is not present yet. I can never get the listener to attach. It only gets to #2A in the console and never #2B. If the overlay is open and I run the same listener code from the console, it works! Any ideas on why and how I can get my listener to attach? I'm assuming it has to do with the DOM not updating?

Thanks!




Aucun commentaire:

Enregistrer un commentaire