在ajax之后加载元素之后选择一个DOM元素

Question

Assume I need to select .my-class But that is not yet in DOM elements It will load by ajax After complete dom loaded.

Now question is How can i get it work after it is loaded.

var class = jQuery('.my-class'); It will not work if called in document ready function .

How can I get It selected??

I don't want to touch ajax function.I want to do it from another js file

Answer 1

Use parent selector, ie

body 

or

document

In combination with jQuery.fn.on ( see: https://api.jquery.com/on/#on-events-selector-data-handler )

But better to use closest parent selector, the one DOM element closest to your dynamic DOM element that won't be loaded dynamically, since that is most efficient.

$(parentSelector).on(event, childSelector, function(){
    // whatever you want to do
});

So code would be like:

$('.some-parent-class').on('click', '.my-class', function(){
    // whatever you want to do
});

Answer 2

You can use a simple setInterval script to poll for your target selector.

var timer = setInterval(timerFunc, 500);

function timerFunc() {
    if ($('.my-class').length){
      clearInterval(timer);
      console.log('exists');
    }
}