javascript - jQuery .trigger 在输入按键时不会触发

Question

我正在尝试创建一个 html 和 jQuery 菜单，该菜单使用箭头键进行导航，并使用 Enter 按钮“单击”所述菜单中的链接。

我创建了一个 fiddle，菜单位于 homepage of my website 上，但这里是菜单 HTML:

<ul id="home_menu">
        <li class="arrow-link"><a href="/blog/">Blog</a></li>
        <li><a href="/resume/">Resume</a></li>
        <li><a href="/portfolio/">Portfolio</a></li>
        <li><a href="/tools">Tutorials</a></li>
        <li><a href="/contact/">Contact</a></li>
    </ul>

这是 .arrow-link 类:

.arrow-link{
   background: url(media/images/selectArrow.png) no-repeat;
   background-position: 0 3px;
}

如果您查看控制台，您可以看到我正在记录两个变量，位置计数器，它指示 <li> 类应用到的 .arrow-link 元素(请参见下面的脚本)，以及 击键值，这是非常不言自明的。

我创建了一个非常简单的脚本，它只是根据位置计数器值切换 .arrow-link 类:

var pos = 1;

        jQuery(document).keydown(function (e) {

            switch (e.which) {

                case 38: // up

                    pos--;

                    if (pos > 5) {
                        pos = 1;
                    } else if (pos < 1) {
                        pos = 5;
                    }

                    moveArrow(pos, e.which);

                    break;

                case 40: // down

                    pos++;

                    if (pos > 5) {
                        pos = 1;
                    } else if (pos < 1) {
                        pos = 5;
                    }

                    moveArrow(pos, e.which);

                    break;

                case 13: // enter

                    console.log("Keystroke Value: " + e.which + " (Enter)");
                    jQuery('.arrow-link a').trigger("click");

                    break;


                default:
                    return; // exit this handler for other keys
            }
            e.preventDefault(); // prevent the default action (scroll / move caret)
        });

        function moveArrow(pos, e) {

            console.log("Position counter: " + pos);
            console.log("Keystroke Value: " + e);
            jQuery("#home_menu").children().removeClass("arrow-link");
            jQuery("#home_menu li:nth-child(" + pos + ")").addClass("arrow-link");

        }

因此，从这个脚本中，我知道传递给 case 语句的值是正确的，并且我可以在按下 Enter 按钮后生成输出到控制台，但是，在我尝试模拟单击的行上( jQuery('.arrow-link a').trigger("click"); ) ， 什么都没发生。我在控制台中没有看到任何错误，它只是没有执行任何操作。

我也尝试过使用 (".arrow-link a").click(); 而不是 jQuery('.arrow-link a').trigger("click");，但同样，没有骰子。

我需要使用什么才能将用户带到相应的链接？

Answer 1

即使在“a”元素上触发点击在 jQuery 中也不起作用，但是，您可以简单地使用普通 javascript:

document.querySelector('.arrow-link a').click();

您可以在这里看到一个工作 fiddle :JSFiddle

这与此处的问题类似:Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?