2014-01-14 4 views
0

Попытка сделать простой виджет. Шаги:javascript callback issue issue

1) Load Jquery, если уже не существует 2) Обратный вызов функции

<html> 
<head> 
    <script type="text/javascript"> 
    function load(callback){ 
     console.log('load'); 
     if (typeof jQuery !== "function") { 
      var js = document.createElement("script"); 
      var he = document.getElementsByTagName('head')[0]; 
      js.type = "text/javascript"; 
      js.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"; 
      he.appendChild(js); 
      js.addEventListener("load", function() { 
       callback(); 
      }); 
     } 
     else 
      { 
       callback(); 
      } 
    } 


    load(function(){ 
     chart(); 
    }) 


    function chart(){ 
     $('#chart').html("id : "+Math.random()); 
    } 

    // alert('This alert breaks!'); 
    </script> 
</head> 
<body> 
    <div id="chart"></div> 
</body> 
</html> 

код работает без предупреждения. Брус понять контекст Issue

Благодаря

+0

Работает для меня в Chrome: http://jsfiddle.net/Zwa7Q/ –

+0

В чем проблема? –

+0

Работает для меня в FF. – juanpaco

ответ

4

Хорошо, разобрался с проблемой.

Ваш код не находится внутри готового обработчика DOM.

Он будет работать, если предупреждение не существует, так как вызов функции асинхронный и DOM готов до завершения AJAX.

но когда предупреждение есть, это создать точку останова в коде и DOM не будет завершена, пока не будет нажата кнопка ОК . Проблема в том, что запрос AJAX не остановлен. Когда вы нажмете ok, AJAX закончит и запустит обратный вызов до того, как DOM будет готов.

0

Переместите блок сценария из тега head и поместите его в конец body непосредственно перед </body>.