Работают ли события javaScript, если я использую jQuery? - PullRequest
Новая
       16

Работают ли события javaScript, если я использую jQuery?

0 голосов
/ 14 июля 2011

Я новичок в создании приложений с использованием jQuery, но я довольно хорошо знаком с javascript.Хорошо, я пытаюсь использовать javascript getElementById, чтобы нарисовать изображение на холсте html5.Мой код:

Включите jQuery и JQuery для мобильных: 

    <link rel="stylesheet" type="text/css" href="lib/jquery.mobile-1.0b1.min.css" />
    <script type="text/javascript" src="lib/jquery-1.6.1.js"></script>  
    <script type="text/javascript" src="lib/jquery.mobile-1.0b1.min.js"></script>

Код с проблемой: 

     <div data-role="content">
      <!--//TO DO canvas drawing-->
      <canvas id="draw_area" width="295px" height = "390px"></canvas>
      ...

      <script type="text/javascript">
      var canvas = getElementById("draw_area");
      var context = canvas.getContext('2d');
      var map = new Image();

      map.src = "./imgs/home_screen1.png";
      map.onload = function (){
          context.drawImage (map, 0, 0);
      };
 </script>

Я также заметил, что я не могу использовать

<body onload = "aFunction();">

не любое другое событие javascript, например "onclick".

Я что-то не так делаю?

Ответы [ 2 ]

3 голосов
/ 14 июля 2011

Это должно быть: 

var canvas = document.getElementById("draw_area");

Ваш скрипт запускает строку getElementById сразу после загрузки, что приводит к сбою (из-за отсутствия document.) и предотвращает выполнение скриптов наОстальная часть вашей страницы не запускается.

Вот небольшая демонстрация , чтобы показать вам, как ошибки скрипта будут препятствовать выполнению последующих строк.

После исправления, как говорит @swalkВы должны инкапсулировать этот скрипт, чтобы он работал на document.ready, чтобы сохранить порядок.

2 голосов
/ 14 июля 2011

Я подозреваю, что это потому, что вы не используете функцию jQuery dom ready.Любой JavaScript, который манипулирует / обращается к DOM, должен быть сделан после того, как DOM готов.Даже если это не проблема, это обычная проблема, когда люди плохо знакомы с JavaScript или jQuery.

Большая часть кода jQuery обычно находится в этой функции готовности: http://api.jquery.com/ready/.

ДляНапример, ваш код должен быть: 

<script type="text/javascript">
$(document).ready(function() {
  var canvas = getElementById("draw_area");
  var context = canvas.getContext('2d');
  var map = new Image();

  map.src = "./imgs/home_screen1.png";
  map.onload = function (){
    context.drawImage (map, 0, 0);
  };
});
</script>
...