Allow modal triggers to be added after module initialization

[krzksz]

Description (*)

Fixes #9671. Event delegation is used to allow different modal opening trigger elements to be added at any time as long as they match given selector.

Fixed Issues (if relevant)

1. Unable to bind modal to elements added dynamically in DOM . #9671: Unable to bind modal to elements added dynamically in DOM.

Manual testing scenarios (*)

1. Create a static block with following contents:

<div id="test">
    <button class="modal-trigger">Sync Modal Trigger</button>
    <button class="modal-trigger">Async Modal Trigger</button>
</div>
<script>
require(['jquery', 'Magento_Ui/js/modal/modal'], function($) {
    $('#modal-content').modal({
        trigger: '.modal-trigger',
    });

    setTimeout(function() {
        $('#test').append('<button class="modal-trigger">Async Modal Trigger</button>');
    }, 2000);
});
</script>

2. Add above static block to CMS page and open it.
3. Without this fix only Sync Modal Trigger button would actually open a modal as it is already present in the DOM tree when modal is initialized. With this patch any button that matches the selector given in trigger option will work no matter when it appeared in DOM, which can be tested by clicking Async Modal Trigger button.

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds are green)

[m2-assistant]

Hi @krzksz. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento give me test instance - deploy test instance based on PR changes
• @magento give me 2.3-develop instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Guide documentation.

[southerncomputer]

this pull messed up two of my extensions causing non-accessible pop-ups to appear! Zombie pop-ups!

[krzksz]

Dear @southerncomputer, I can see tests failing so there are some adjustments that have to be done to make this work. Can you please share some more information about the issue, preferably in pure Magento so I can reproduce it?

[krzksz]

@magento give me test instance

[magento-engcom-team]

Hi @krzksz. Thank you for your request. I'm working on Magento instance for you

[magento-engcom-team]

Hi @krzksz, here is your new Magento instance.
Admin access: https://pr-25435.instances.magento-community.engineering/admin
Login: admin Password: 123123q

[krzksz]

Hey @southerncomputer, can you retest your problem with newest changes in this PR?

[southerncomputer]

@krzksz seems to have fixed my modules problems!

[magento-engcom-team]

Hi @dmytro-ch, thank you for the review.
ENGCOM-6229 has been created to process this Pull Request

[engcom-Golf]

✔️ QA Passed

[m2-assistant]

Hi @krzksz, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

[VladimirZaets]

@krzksz will be great if you will cover your changes with the unit test ( you can check that event triggered ). Thanks

[krzksz]

@VladimirZaets Gladly, I will prepare a separate PR.