Question

I am developing a web application and during the development phases I am adding some scripts.

I noticed that the number of scripts are many and will probably increase.

I usually put everything enclosed in the document.ready and execute when the page is loaded.

There’s a specific script that sets a specific style to an element ONLY if a class is present in the DOM.

Is there a way to run the script only if the specific element is in the DOM tree?

Answer 1

You can load the script (via AJAX), or run the code when it’s needed, by checking the length of the jQuery object to see if the element exists.

if($(selector).length > 0){ // if element is in DOM
    $.getScript('file.js'); // load file
    // or just run some code
    alert('element is here');
}

Or you can check out yepnope.js.

yepnope({
    test: $(selector).length,
    yep: 'file.js',
    callback: function(url, result, key){
      if(result){
        alert('element is here');
      }
    }
});