jQuery单击触发器应用于箭头键不起作用

Question

我试图使用 jQuery 的 trigger() 方法将箭头导航应用到图片库。

我从另一个 stackoverflow 用户那里得到了一个例子，它似乎很好，但是当我向列表项添加真实链接时，它们只会在单击时加载，而不是在按下箭头键时加载。

In this JSfiddle 最后两个列表项“apple”和“microsoft”具有真实链接，当它们被箭头键激活时，它们应该将页面加载到 iFrame 上，但它们没有。它们仅在单击时才能正常工作。

如何使按键等于点击？

var chosen = "";
$(document).keydown(function(e){ // 38-up, 40-down
    chosen = $('li.selected').index(); //grab the current selection
    if (e.keyCode == 40) { 
        if(chosen === "") {
            chosen = 0;
        } else if((chosen+1) < $('li').length) {
            chosen++; 
        }
        selectImage(chosen);
        return false;
    }
    if (e.keyCode == 38) { 
        if(chosen === "") {
            chosen = 0;
        } else if(chosen > 0) {
            chosen--;            
        }
        selectImage(chosen);
        return false;
    }
});

function selectImage(whichIndex) {
    $('li:eq('+whichIndex+') a').trigger("click");
}
$("#selection a").click(function() {
    $('li').removeClass('selected'); 
    $(this).parent().addClass('selected');

    $("#debug").text( $(this).attr("href") +" was just clicked");   
});

Answer 1

.trigger() 函数只会导致您使用 jQuery 附加的处理程序方法执行。它不会导致<a> 元素的正常行为执行。也就是说，它不会加载<iframe>。

您可以使用e.preventDefault() 来防止<a> 元素执行其默认行为，并添加显式执行它的代码。这样，当它被点击和.trigger() 被调用时，它都会执行。

在您的情况下，您需要设置<iframe> 的src 属性。

尝试将事件处理程序更改为：

$("#selection a").click(function(e) {
    var $a = $(this);
    e.preventDefault();
    $a.parent().addClass('selected').siblings().removeClass('selected');
    $('iframe[name=iframeload]').prop('src', $a.attr('href'));
    $("#debug").text( $a.attr("href") +" was just clicked");   
});