проблема с HTML() при использовании JQuery Ajax

Question

load.php

<h2>Envato is 3!</h2> 

index.php

<input type="button" value="load" id="load_basic" /> 
<div id="result" class="functions"> 
</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> 
</script> 
<script type="text/javascript"> 
    $.ajaxSetup ({ 
     cache: false 
    }); 
    var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />"; 

// load() functions 
    var loadUrl = "ajax/load.php"; 
    $("#load_basic").click(function(){ 
     $("#result").html(ajax_load).load(loadUrl); 
     console.log($("#result").html()); 
    }); 
</script> 

в веб-интерфейсе, когда я нажимаю на кнопку, в консоли> хром-он показывает:

<img class="loading" src="img/load.gif" alt="loading..."> 

Вопрос:

1. Почему бы не показать: <h2>Envato is 3!</h2>, потому что .load() уже поставил содержимое в #result?

2. console.log($("#result").html()); показывает результат: <img class="loading" src="img/load.gif" alt="loading...">, но почему в интерфейсе, когда я использую firebug, не вижу элемент img: load.gif?

Answer 1

Если вы хотите использовать результат вызова AJAX, вы должны сделать это в функции обратного вызова:

$("#load_basic").click(function(){ 
    $("#result").html(ajax_load).load(loadUrl, function() { 
     console.log($("#result").html()); 
    }); 
});