Javascript resultados de la función en la página HTML de recarga: ¿por qué?

Question

pregunta foro ...

El objetivo:

• Me intención de tener un campo de entrada de texto HTML como una especie de entrada de línea de comandos.

• Una lista no ordenada de HTML 5 muestra los comandos más recientes. Al hacer clic en uno de los últimos comandos de esta lista debe rellenar el campo de texto de una línea de comandos con el comando respectivo (con el fin de volver a ejecutar o modificarlo).

• Una lista no ordenada HTML contiene un conjunto de resultados. Al hacer clic sobre un documento de identidad en esta lista debe llevar la respectiva identificación en el campo de texto de entrada de línea de comandos.

En HTML (DHTML): Funciona como se esperaba: al hacer clic en el enlace del campo de texto de entrada de línea de comandos se rellena con un comando reciente

.

<li><a href="#" id="last_cmd_01" onclick="document.getElementById('cli_input').value = document.getElementById('last_cmd_01').firstChild.nodeValue;document.getElementById('cli_input').focus()">here would be one of the recent commands</a></li>

En el archivo Javascript: No funciona como se esperaba: al hacer clic en el enlace de la entrada de la conversión de texto de campo de línea de comandos se rellena con el valor correspondiente (como debería), pero parece que la página HTML que se está recargado, el texto campo de entrada y todas las listas dinámicamente pobladas se vacían.

    function exec_cmd(cli_input_str) {
// a lot of code ...
// the code that should provide similar behavior as onclick=... in the DHTML example
$('.spa_id_href').click(function(){document.getElementById('cli_input').value = document.getElementById('cli_input').value + this.firstChild.nodeValue;});
}

Ahora la pregunta: Además de un posible error Javascript (sintaxis), lo que podría hacer que el navegador para recargar la página?

Answer 1

Cambiar

$('.spa_id_href').click(function(){...

a

$('.spa_id_href').click(function(evt){...//notice the evt param

y en la función, llamada

evt.preventDefault();

Answer 2

En ambos casos, no hace nada para cancelar la función por defecto de hacer clic en un enlace.

En el ejemplo HTML plano, se sigue el enlace de la parte superior de la página.

No se especifica lo que el atributo href para el segundo ejemplo se parece, pero sea lo que sea, será seguido.

http://icant.co.uk/articles/pragmatic-progressive -enhancement / para una buena explicación de la cancelación del evento y el buen diseño de eventos. Ver http://docs.jquery.com/Tutorials:How_jQuery_Works por alguna orientación específica jQuery.

Answer 3

Parece que sólo tienes que seguir la URL de destino del enlace. Esto se debe a que no impiden la acción predeterminada clic:

e.preventDefault(); // `e` is the object passed to the event handler
// or
return false

Como alternativa, puede configurar a href comenzando con #, o no utilizar el elemento <a> en absoluto (uso <span style="cursor:pointer"> su lugar) - si no es un vínculo real, por supuesto

.

Answer 4

Se trata básicamente relacionada con la cancelación de eventos ... Prueba esto:

try { (
   e || window.event).preventDefault(); 
} 
 catch( ex ) 
{ 
 /* do Nothing */ 
}

Answer 5

Mientras que las otras respuestas aquí son excelentes puntos sobre la cancelación de eventos, todavía tendrá problemas si su JavaScript contiene errores que impiden su código de evento de cancelación que se ejecuten. (Como podría ser el caso si usted es, por ejemplo, depuración del código .

Como precaución adicional, recomiendo encarecidamente que no href="#" uso en los enlaces que sólo desencadenan scripts. En su lugar, utilice el operador void:

<a href="javascript:void(0)" onclick="...">...</a>

La razón de esto es: cuando el evento no se cancela, el navegador intentará cargar la URL suministrada por el atributo href. El javascript: "protocolo" dice al navegador que utilice en su lugar el valor del código de acompañamiento a menos que el valor es undefined . existe El operador void explícitamente para volver undefined , por lo el navegador se queda en la página existente - sin Recargar / Actualizar -. que le permite continuar la depuración de la secuencia de comandos

Esto también le permite saltarse todo el lío evento de cancelación de JS-únicos enlaces (aunque todavía se necesita para cancelar eventos en código adjunto a los enlaces que tienen una URL "de reserva" para los clientes no JS).