如何在js片段完全加载后添加jQuery代码？

Question

I'm having trouble adding click function to the button which is loaded with JS snippet, because when I try doing the function like this on document.ready

jQuery(document).ready(function( $ ){   
    $(".esis__heading").on('click', function(event){
      console.log('123123');
})});

it fails because the element is not loaded and visible yet.

I was thinking maybe timeout is a solution but I started to think it's not a perfect solution. If someone has any advice on how to deal with this it would help a lot. This is the link to a page which has a snippet that loads after some time https://samsung.plutonium.rs/samsung/

Thanks in advance.

Answer 1

You solve this by delegating the click to a parent element, at worst this can be the document itself

$(document).ready(function( $ ){   
    $(document).on('click', ".esis__heading", function(event){
      console.log('123123');
    });
});

Answer 2

You can defer the load of the script using the defer attribute

Defer documentation (w3schools.com)

The only downside is that it works only on external scripts (script tags with src attribute).