Javascript函数导致HTML页面重新加载:为什么？

Question

新手问题......

目标:

• 我打算将HTML文本输入字段作为一种命令行输入.

• 无序的HTML列表显示了最近的5个命令.单击此列表中的最后一个命令应使用相应的命令填充命令行输入文本字段(以便重新执行或修改它).

• 无序HTML列表包含结果集.单击此列表中的ID应将相应的ID带入命令行输入文本字段.

在HTML(DHTML)中: 按预期工作:单击链接时,命令行输入文本字段将填充最近的命令.

<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>

在JavaScript文件: 不能按预期工作:在点击链接时,在命令行输入文本字段获取具有各自的值填充(如它应该),但后来好像完整的HTML页面被重新加载,文本输入字段和所有动态填充的列表变空.

    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;});
}

现在的问题: 除了潜在的Javascript(语法)错误,还有什么可能导致浏览器重新加载页面？

Answer 1

在这两种情况下,您都无法取消单击链接的默认功能.

在纯HTML示例中,遵循指向页面顶部的链接.

您没有指定第二个示例的href属性是什么样的,但无论它是什么,都会遵循它.

有关事件取消和良好事件设计的详细说明,请参见http://icant.co.uk/articles/pragmatic-progressive-enhancement/.有关jQuery的具体指导,请参见http://docs.jquery.com/Tutorials:How_jQuery_Works.