jQuery — встроенный вызов функции

Я пытаюсь передать одну переменную встроенной функции jQuery (то есть: используя onMouseOver="function();" в фактической ссылке (которая является тегом области из карты изображения)).

Функция вызывается только в том случае, если я помещаю ее перед строкой $(document).ready(function(){, но это вызывает всевозможные проблемы с jQuery.

Все, что мне нужно, это простой тег (например, <area shape="circle" coords="357,138,17" onMouseOver="change('5');" id="5" />) для запуска функции, содержащейся в обычном теле кода jQuery.

Большое спасибо за любую помощь, которую вы можете предложить.

Чтобы проиллюстрировать это, следующие работы:

<script type="text/javascript">
function myfunction(x)    {  alert(x); //Alerts 2  
}
</script>

<img src="/shared_images/loading.gif" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="171,115,516,227"
onMouseOver="myfunction('2')"></map>

Но следующее не

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function myfunction(x)    {  alert(x); //Nothing happens   
}
}
</script>

<img src="/shared_images/loading.gif" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="171,115,516,227"
onMouseOver="myfunction('2')"></map>

javascript jquery inline javascript-events
person Patrick Beardmore    schedule 22.08.2009    source источник

Ответы (2)


arrow_upward
10
arrow_downward

Во втором примере вы объявили myfunction внутри анонимной функции, которую вы передаете .ready(). Это означает, что myfunction — это локальная переменная, которая находится в области видимости только внутри этой анонимной функции, и вы не можете вызывать ее откуда-либо еще.

Есть два решения.

Во-первых, вы можете объявить его вне (до или после) вызова .ready(). Это не должно мешать работе jQuery. Если это так, что-то еще не так (возможно, простая синтаксическая ошибка?), и мы будем рады, если вы зададите вопрос StackOverflow.

Во-вторых, вам не следует использовать onMouseOver="" для присоединения обработчиков событий (поскольку это смешивает JavaScript с HTML), так что давайте полностью от него избавимся. Замените свой JavaScript на это:

$(document).ready(function() {
    $("#that-area-down-there").mouseover(function() {
        alert(2);
    });
});

И ваш HTML с этим:

<area shape="rect" coords="171,115,516,227" id="that-area-down-there" />

(Предположительно, вы, конечно, захотите заменить это id чем-то более значимым в контексте.)

person VoteyDisciple    schedule 22.08.2009
comment
Это отличный ответ. Вы пишете, что myfunction является локальной переменной. Не могли бы вы объяснить, как функции могут быть переменными. Большое спасибо. - person Patrick Beardmore; 22.08.2009
comment
В JavaScript все является переменной (или, используя более традиционный язык, все является данными), включая функции. Когда вы пишете function f() { };, вы, по сути, просто используете псевдоним для var f = function() { }; Именно это позволяет использовать анонимные функции в JavaScript. В других языках вы можете написать либо int x = 2; f(x);, либо просто f(2). В JavaScript, поскольку функции являются такими же данными, как и все остальное, вы можете написать либо var foo = function() {}; f(foo);, либо просто f(function() {}); Понимание этого является ключом к пониманию JavaScript. - person VoteyDisciple; 22.08.2009

arrow_upward
1
arrow_downward

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

Во-вторых, функция, которую вы определяете внутри функции, существует только в этой области. Когда вы выходите из функции, она больше не существует.

Пример:

$(document).ready(function(){
   function myfunction(x) {
      alert(x);
   }
   myfunction(42); // here it works
}

myfunction(-1); // here it doesn't exist

Вы можете определить функцию глобально изнутри функции следующим образом:

$(document).ready(function(){
  myfunction = function(x) {
    alert(x);
  }
});
person Guffa    schedule 22.08.2009
comment
Во втором примере кода эта функция будет вести себя как обычная функция в остальной части документа? Можно ли его вызвать как обычную функцию javascript с onMouseOver=go(); Спасибо - person Patrick Beardmore; 22.08.2009