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"> </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