jQuery.getScript загружает файл javascript перед DOM

Question

Использование ajax для загрузки моего контента динамически. Мне нужно, чтобы загрузить файл яваскрипта после того, как я нажимаю на кнопке:

<a id="element" href="http://example.com/test">button</a> 

Но ниже сценарий загружает файл JavaScript, прежде чем был загружен DOM. Как я могу это решить?

$("#element").click(function() { 
    jQuery.getScript("example.com/jsfile.js?ver=0.9"); 
}); 

скриншот поджигатель: http://img607.imageshack.us/img607/1630/4mu7.png

1-ая строка загруженного файла JavaScript, который вызывается через выше функции и 3-й строке страницы, которая загружается.

Answer 1

Используйте документ readyState свойства:

$("#element").click(function() { 
    if(document.readyState === "complete") 
     jQuery.getScript("example.com/jsfile.js?ver=0.9"); 
}); 

https://developer.mozilla.org/en-US/docs/Web/API/document.readyState

Answer 2

Working JSBin - http://jsbin.com/uJUBAru/1/edit

Jquery использование подхода document.ready()

$(document).ready(function(){ 
    $("#element").click(function() { 
    $.getScript("example.com/jsfile.js?ver=0.9").done(function(script, textStatus) { 
     console.log(textStatus); 
    }) 
    .fail(function(jqxhr, settings, exception) { 
     console.log('error'); 
    }); 
    }); 
}); 

Answer 3

Я установил тайм-аут е или функции. Теперь страница загружается и через 5 секунд загружается javascript. Хотя это решение, оно не очень безопасно.

Любые другие предложения?

$("#element").click(function() 
{setTimeout(function(){ 
    jQuery.getScript("example.com/jsfile.js?ver=0.9"); 
}, 5000); 

});