将点击功能移动到JS文件

Question

我正在学习JS的基础知识，所以很用。

我有这个链接：

<a href="#comment" onclick="window.location.hash = 'comment'; document.getElementById('comment').focus(); return false;" id="to-comment">Leave a comment</a>

我想在函数中将其单击移动到我的 JS 文件。为此，我有：

jQuery("#to-comment").click(function() {
    window.location.hash='comment';
    document.getElementById('comment').focus();
    return false;
});

它不起作用。我做错了什么？

编辑：澄清我的问题：如何将该onclick功能成功移动到我的JS文件中？

请参阅此工作 jsFiddle。

Answer 1

更新：

我最终得到的是：

$("#to-comment").click(function() {
    setTimeout(function() {
        $('#comment textarea').focus();
    }, 1);
});

.html：

<div id="comment">
    <textarea></textarea>
</div>
...
<a href="#comment" id="to-comment">Leave a comment</a>

似乎 Firefox 在 hashchange 事件之后对focus感到矛盾，因为它刚刚到达 href 中的锚点并对其应用了焦点。第二次聚焦尝试没有产生任何结果，因为它可以防止焦点劫持。

为了规避这种情况，我们可以将comment ID添加到不"保持"焦点的元素（如div）中。这样，可以在移动到该定位点后更改焦点。

我仍然发现有必要将焦点尝试添加到执行堆栈的末尾setTimeout以免在单击<a href="#comment"...后发生的哈希更改+焦点事件的生命周期中发生。

我已经在火狐，野生动物园和chrome中运行了小提琴，似乎还可以。如果没有 javascript，锚点应该按预期工作。

小提琴：

https://jsfiddle.net/jbuw058z/12/

Answer 2

代码未包装在 ready 中。这可能是问题所在。

$(document).ready(function() {
    $('#to-comment').on('click', function() {
        window.location.hash='comment';
        $('#comment').focus();
        return false;
    });
});

Answer 3

这应该是您的链接：

<a href='javascript: ;' id='to-comment'>Leave a comment</a>

href='javascript: ;'运行一个空的javascript片段，hense什么都不做。

这应该是你的Javascript：

$( '#to-comment' ).click(function() {
  window.location.hash = 'comment';  //Equivalent to a href='#comment'
  document.getElementById( 'comment' ).focus();
});

如果你还没有，你需要将以前的JavaScript包装在：

$(function() {
  //Previous code
});

附言这还没有经过测试

Answer 4

我认为您必须使用其他标签，而不是a标签。

<span href="#comment" id="to-comment">Leave a comment</span>