How to wait until modal body loads before applying querySelector

Question

I am using modal bootstrap to load my component during the click, my problem is I am trying to target the svg inside of the modalbody and add an EventListener to the svg, but it's not loaded when i am trying to apply querySelector. How to wait until it is loaded?

 onClick: function(ev){
             this.zone = ev.path[0].className.baseVal
             this.zone = this.zone.substr(0, this.zone.indexOf(' '));
             let dataelement = document.getElementsByClassName(this.zone);

             dataelement[0].setAttribute('data-toggle', 'modal');
             dataelement[0].setAttribute('data-target', '#exampleModal');

             var modalSvg = document.querySelector(".modal-content");

             modalSvg.onload = function(){
               var modalBody = document.querySelector(".modal-body");
               console.log(modalBody)
             }();

             modalSvg.addEventListener('click', this.selectZone)
             // console.log(modalSvg)
             // console.log(modalBody);
             // modalSvg.addEventListener('click', this.selectZone)
         },
         selectZone: function(event){
             // console.log(this)
         }

Answer 1

You can use the 'shown' event of the Bootstrap modal to bind your event.

Try:

    $('#myModal').on('shown.bs.modal', function () {
        // your on click event binding here.

        // example of triggering an input.
        $('#myInput').trigger('focus');
    })

If you want to use it with pure Vanilla JS you can check this to see an alternative implementation.