Tagging Modals / Popups

[jhooper]

Hello, 

On Screwfix.com we have a popup that shows when a customer clicks the delivery or Click and collect buttons. 

When an add to basket button is clicked JS kicks in and shows the pop up for that product, I want to be able to tag the buttons within this modal, however, when i create a jQuery onHandler it does not fire when that class is clicked.... is this because the markup is not in the DOM until the div is clicked and JS shows the modal?

How can I tag the different elements?

Many Thanks

James 

[kathleen_jo]

Hello @jhooper. Great question. Perhaps this post can help? 

• https://community.tealiumiq.com/t5/Tealium-iQ-Tag-Management/Fire-AdRoll-tag-on-modal-quot-popup-quo...

Let me know! 

[Srinivasan]

Hello @jhooper

I would recommend to go ahead with below JS code to able to tag the required buttons within your modal. Sometime your code will execute before DOM is ready.

addEvent(window, 'load', function(e) {
var input = document.body;
addEvent(input, 'mousedown', function(e) {
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (target.parentNode.id === 'abc') {
}
});
});

Hope it helps! Kindly let me know if you need any clarifications on this. Thanks!

[Santosh1]

Hi - Could you please provide the complete code block for the same. The above one doesn't seem to work.

[shivam99787]

Hello James,

If the markup for the buttons within the modal is not in the DOM until the div is clicked and the modal is displayed, the jQuery event handler may not work when using the typical on() or click() methods.

To handle this scenario, you can make use of event delegation. Event delegation allows you to attach an event handler to a parent element that exists in the DOM and can capture events from its child elements, even if they are dynamically added later.

Here's an example of how you can implement event delegation using jQuery:

javascript

$(document).on('click', '.your-modal-class .your-button-class', function() {
// Your tagging code here
});
In the example above, you attach the event handler to the document element and specify the target button within the modal using the appropriate selector (replace .your-modal-class and .your-button-class with the actual CSS classes used for the modal and buttons).

By using event delegation, the event handler will still be triggered even if the buttons are dynamically added to the DOM after the initial page load.

I hope this helps! Let me know if you have any further questions.