jQuery-chamando uma função inline
estou a tentar passar uma variável para uma função jQuery inline (ie: usando um onMouseOver="function();" dentro da ligação actual (que é uma marca de área de um mapa de imagem).
a função só está a ser chamada se a colocar antes da linha $(document).ready(function(){, mas fazer isto está a causar todo o tipo de problemas com o jQuery.
tudo o que eu quero é uma tag simples (como <area shape="circle" coords="357,138,17" onMouseOver="change('5');" id="5" /> para lançar uma função que está contida dentro do corpo normal de código jQuery.
para ilustrar o ponto, as seguintes obras:
<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>
mas o seguinte não
<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>
2 answers
myfunction dentro da função anónima para a qual estás a passar. Isso significa myfunction é uma variável local, que está apenas no escopo dentro dessa função anônima, e você não pode chamá-la de qualquer outro lugar.
Há duas soluções.
Primeiro, você pode declará-lo fora (antes ou depois) a chamada para .ready(). Isto não deve causar qualquer interferência com o jQuery. Se o fizer, algo mais está errado (talvez um erro de sintaxe simples?) que nós gostaríamos que você trouxesse para cima em uma pergunta StackOverflow.
Em segundo lugar, você não deveria estar usando onMouseOver="" para anexar manipuladores de eventos( como isso mistura JavaScript com HTML), Então vamos acabar com isso completamente. Substitua o seu JavaScript por isto:
$(document).ready(function() {
$("#that-area-down-there").mouseover(function() {
alert(2);
});
});
E o seu HTML com isto:
<area shape="rect" coords="171,115,516,227" id="that-area-down-there" />
(presumivelmente você vai querer substituir isso id por algo mais significativo no contexto, é claro.)
Em segundo lugar, a função que você define dentro da função só existe nesse escopo. Quando você sai da função ela já não existe.
Exemplo:
$(document).ready(function(){
function myfunction(x) {
alert(x);
}
myfunction(42); // here it works
}
myfunction(-1); // here it doesn't exist
Você pode definir a função globalmente a partir de dentro da função como esta:
$(document).ready(function(){
myfunction = function(x) {
alert(x);
}
});