Llamar a la función javascript dentro de la etiqueta HTML

Question

Tengo lo siguiente.

<a href="#" onclick="hello()">click me</a> 

y yo tenemos un archivo Javascript

$(document).ready(function() { 
    function hello() { 
    alert('hi'); 
    } 
}); 

Pero cuando hago clic en "Click Me", no se disparó la alerta. Dice "hola" no está definido. Eliminé document.ready y funciona.

¿Esto es porque "hola" no se está definiendo hasta que todo el documento esté listo, pero cuando se está procesando la etiqueta "ancla" anterior, no puede encontrar la función?

¿Hay alguna manera de que pueda hacer que esto funcione?

• tengo que llamar a la función JavaScript de la etiqueta HTML a través fea "onclick"
• necesito mantener mis JS dentro document.ready (hay otras partes que necesito)

Answer 1

Su hello() la declaración de función no está en el ámbito global, por lo que la llamada desde el HTML que intenta llamarlo al ámbito global no puede encontrarla. Usted puede solucionarlo moviendo su función hello() en el contexto global:

function hello() { 
    alert('hi'); 
} 

$(document).ready(function() { 
}); 

o declarando que en el ámbito global:

$(document).ready(function() { 
    window.hello = function() { 
    alert('hi'); 
    } 
}); 

Answer 2

La razón hola no está definido es porque Hola() sólo existe en el contexto de la devolución de llamada DomReady. Necesita definir Hello() en el contexto global.

Answer 3

1. Eliminar "hello()" de $ (document) .ready() callback.
2. Llamar a "hello()" en una devolución de llamada de evento "clic".

<a href="#" id="say_hello">click me</a> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#say_hello').click(function() { 
     hello(); 
    }); 
}); 

function hello() { 
    alert('hi'); 
} 
</script> 

Answer 4

También puede utilizar el HREF atributo con javascript: palabra clave en la etiqueta de anclaje para llamar a una función de JavaScript:

<a href="javascript:hello()">click me</a>