jquery热键动态绑定答案

【问题标题】：jquery hotkeys binding dynamicallyjquery热键动态绑定
【发布时间】：2011-06-11 01:07:57
【问题描述】：

我正在使用 jresig 的 jquery 热键，它看起来适用于单个热键。问题是我有一个来自数据库的热键列表，我想读取它们并动态分配热键。所以我有一个热键和值列表，这是我的 js：

$(document).ready(function() {  
  var keyList = [];

  $('.hotkey').each( function(){
    hotkey = $(this).attr('value');
    hotkey = hotkey.substring(1,hotkey.length-1);

    myVal = $(this).next().attr('value');

    alert("binding " + hotkey);

    $(document).bind('keydown', hotkey, function() {
      alert("YOU PRESSED " + hotkey);
      $('.chosen-category-id').attr('value', hotkey);
      $('.chosen-category-name').attr('value', myVal);
    });  

  })
})

现在发生的情况是，每次我按下一个键时，它都会提醒它绑定的最后一个热键。这里的逻辑有问题吗？我不让自己复制粘贴无数的 document.bind 行，所以我试图动态地做到这一点。

编辑

我用这个重构了我的代码：

$(document).ready(function() {  

  var keyList = [];
  var keyValues = [];

  $('.hotkey').each( function(){
    hotkey = $(this).attr('value');
    hotkey = hotkey.substring(1,hotkey.length-1);

    keyList.push(hotkey);

    keyValues.push($(this).next().attr('value')) ;
  })


  $.each(
    keyList,
    function(index, key) {
      $(document).bind('keydown', key, function() {
        alert("O HAI YOU PRESSED " + key);
        $('.chosen-category-id').attr('value', key);
        $('.chosen-category-name').attr('value', keyValues[index]);
        return false;
      });  
    }
  )


})

它现在有效，但我很好奇为什么这个有效而另一个无效。热键变量是否继续覆盖最后一次迭代？此外，第一个代码看起来更高效，因为它只执行一个循环，而第二个代码执行两个。

【问题讨论】：

您也可以发布使用的标记吗？最好在 jsfiddle.net 上？
您需要了解有关标记的哪些信息？它们只是很多带有类热键和值的输入按钮，格式为“（热键）”，我也编辑了问题
顺便说一句，并不意味着听起来像个混蛋。我只是认为标记与我获得正确的值无关，问题是绑定的分配

标签： jquery jquery-plugins hotkeys

【解决方案1】：

我遇到了类似的问题。我有这个：

$(document).bind('keypress', keyBinding, function(e) {
    e.preventDefault();
    $(this).trigger("click");
});

但在阅读了一些示例后，我将其更改为：

$(document).bind('keydown', keyBinding, function(e) {
    $(this).trigger("click");
    return false; 
});

这两个都在每个循环中，就像你的一样，我将键绑定变量分配给“Ctrl+s”或“Ctrl+Right”之类的东西。有趣的部分显然是“keypress”和“return false;”。我现在所拥有的一切都很好。我的第一个代码并非在所有浏览器（chrome）中都有效，但在 FF 中有效。

我学到的另一个花絮是你必须小心绑定。某些绑定不适用于所有浏览器。例如 Ctrl+n 在 Chrome 中不起作用（可能是其他）。 github site 中包含测试页面。我对其中一个进行了改装，以便在我的本地开发站点上工作，这样我就可以测试关键组合，直到找到在页面上有效且有意义的组合。

【讨论】：