jquery get method returns html data with jquery get method

Question

<script type="text/javascript">    
$.get("url",function(data){
   $('#div').html(data);
});
</script>

after using this function data returns below:

<div id="info"></div>
<script type="text/javascript">
$.get("urlanother",function(data){
$('#info').html(data);
});
</script>

My problem is second get operation not work.

How to do it?

Answer 1

Setting jQuery html() or JavaScript innerHTML to a string with <script> in does not cause the script to be run. The script may get run later if you try to manipulate the DOM object representing it, but this is highly inconsistent across browsers and is behaviour best avoided. jQuery attempts to handle load()ed scripts in a consistent way, but fails.

So avoid inserting <script> into the document. Instead, keep your JavaScript code in static scripts loaded by the main document, and fire later on-content-loaded-from-get code using the callbacks jQuery gives you to let you know when they're done:

$('#div').load('url', function(){
    $('#info').load('urlanother');
});