Сценарий Jquery не загружается должным образом

Ниже приведен простой код. Когда кто-то нажимает кнопку, он нарисовывает изображение, которое может быть изменено или изменено, и движется
Ниже код работает нормально, но если я переведу свой Java-скрипт над тегом холста в моей голове, тег
Ниже сценария src = https://ajax.googleapis .. ....
код внезапно перестает работать
любопытно, как к тому, что триггер это событие, и как ее решитьСценарий Jquery не загружается должным образом

кОД:

<head> 
    <meta charset="utf-8"> 
    <title>fabric.js-simple text display</title> 

    <!-- Get version 1.1.0 of Fabric.js from CDN --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js" ></script> 

    <!-- Get the highest 1.X version of jQuery from CDN. Required for ready() function. --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

    <body> 
     <!-- A canvas tag is required or 
      Fabric.js doesn't know where to draw. --> 

     <canvas id="myCanvas" height=600 width=800></canvas> 
     <input id="addStuff" type="button" value="Add!" /> 
    </body> 

    <script> 

     var canvas = new fabric.Canvas('myCanvas'); 
     var ctx = canvas.getContext("2d"); 

     $(function(){ 
      $('#addStuff').on('click', function(e) { 

       fabric.Image.fromURL('http://i.imgur.com/a47Yxsb.png', function(oImg) { 
        oImg.scaleToWidth(90); 
        oImg.left=50; 
        oImg.top = 50; 
        canvas.add(oImg); 
       }); 
      }); 
     }); 
    </script> 
</head> 


</html>

источник

2013-12-10 mughees ilyas

Это распространенная проблема.

С кодом, как вы показать его, следующая часть выполняется при загрузке страницы:

var canvas = new fabric.Canvas('myCanvas'); 
var ctx = canvas.getContext("2d");

Хотя код JQuery прямо под эти 2 строки выполняются, когда документ будет готов (ваш синтаксис аналогичен $(document).ready(handler)).

Проблема в том, что DOM загружается снизу, поэтому, если вы поместите две первые строки поверх своего документа, к моменту их выполнения элементы HTML, которые ниже, еще не существуют, вызывает ошибку Javascript, поскольку вы ссылаетесь на элемент myCanvas, которого в настоящее время не существует.

Таким образом, вы можете, например, переместить эти 2 строки в «готовую» функцию jQuery ниже, и в этом случае вы можете поместить эту функцию туда, где хотите, даже поверх вашего документа, поскольку они не будут выполнены до загружается весь DOM. Лучшее место для этого было бы в отдельном файле javascript, хотя в последний раз я проверил лучшее место, чтобы включить эти .js-файлы в самую нижнюю часть тела.

источник

2013-12-10 18:04:48

Это потому, что у ou're делает вещи с DOM. В рабочем случае JS запускается после того, как все теги тела загружены, включая элемент, к которому вы хотите добавить обработчик, поэтому все работает нормально. Когда вы кладете его в тег заголовка, DOM не загружается, когда код выполняется, поэтому он терпит неудачу.

Been пойман это одно много раз, вы можете избежать этого, добавив все ваши JS в $ (документ) .ready(), который ожидает этот документ должен быть готов перед запуском т.е.

$(document).ready(function() { 
    var canvas = new fabric.Canvas('myCanvas'); 
    var ctx = canvas.getContext("2d"); 

    $('#addStuff').on('click', function(e) { 
     ... 
    } 
});

источник

2013-12-10 17:58:39 krischan

Это частично неверно. Проблема заключается в двух строках перед оператором jQuery, который аналогичен тому, который вы предлагаете в качестве решения (cfr [jQuery manual] (http://api.jquery.com/ready/)), но проблема действительно из-за ссылки на элементы DOM, которые еще не загружены, если этот код был помещен поверх страницы. –

m уже использует $ (function(), который равен $ (document) .ready (function() Я думаю, что у bartdude есть точка, я попробую это –

ах, да, вы совершенно правы, это было скорее мозговой пердит на примере кода, чем что-либо еще. Рад, что вы получили свой ответ, отредактируете ради точности – krischan

Сценарий Jquery не загружается должным образом

ответ

Смежные вопросы