Question

我正在学习JS的基础知识，而不是。

我有这个链接：

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

我想在一个函数中将该onclick移动到我的JS文件中。要做到这一点，我有：

jQuery("#to-comment").click(function() {

    window.location.hash='comment';

    document.getElementById('comment').focus();

    return false;

});

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

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

查看此工作jsFiddle。

Answer 1

代码未包含在ready中。这可能是个问题。

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

Answer 2

这应该是您的链接：

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

P.S 尚未经过测试

Answer 3

<强>更新

我最终得到的是：

$("#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在focus事件之后与hashchange发生冲突，因为它刚刚转移到href中的锚点并将焦点应用于它。第二次聚焦尝试并没有产生任何结果，因为它可以防止焦点劫持。

为了避免这种情况，我们可以将comment ID添加到没有＆＃34; hold＆＃34;焦点（像一个div）。这样，可以在前往该锚点后改变焦点。

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

我在firefox，safari和chrome中运行小提琴，似乎没问题。没有javascript，锚应该按预期工作。

小提琴：

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

Answer 4

我认为您必须使用其他标记，而不是a标记，例如

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

将onclick函数移动到JS文件

4 个答案: