- TLC Home Home
- Discussions Discussions
- Documentation Documentation
- Knowledge Base Knowledge Base
- Education Education
- Blog Blog
- Support Desk Support Desk
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
Hello @jhooper. Great question. Perhaps this post can help?
Let me know!
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.
Copyright All Rights Reserved © 2008-2023