按键事件仅触发一次答案

【问题标题】：Keypress event firing only once按键事件仅触发一次
【发布时间】：2012-05-21 17:22:25
【问题描述】：

我正在这样做：

$(".classname").bind("keypress",function(){
    alert("event happened");
})

与上面类似的代码，只工作一次，我的意思是，第一次键入并单击 Enter 时，它可以工作，但下一次，它根本没有反应。

$("#id").bind("keypress",function(){
   alert("haiii");
})

第二个代码一直工作，但第一个代码只工作一次。

另外，如果第二个代码运行一次，第一个代码甚至不会运行一次。

解决办法是什么？我想我在这里遗漏了一些规则，你能告诉他们，以便我搜索它们。谢谢

【问题讨论】：

可能是因为您提交了表单？
你的意思是，你想让我使用 e.preventDefault() 吗？但是 preventdefault() 应该用于提交按钮，对吗？这里如果我阻止默认，输入框的正常动作不会发生，这里我指的元素是输入类型=文本元素
试试e.preventDefault()
jsfiddle.net/CSVkZ 我在这里发布了代码..

标签： javascript jquery event-delegation

【解决方案1】：

事件绑定器应该始终可用；如果不是，那是因为您正在更改 HTML 结构（追加或删除节点）。在您的情况下，您在运行时动态更改 HTML，您需要使用 .on()

试试这个而不是.bind():

    $('#id').on({
       keypress: function () { alert("hi"); }
    });

    $('.ClassName').on({
       keypress: function () { alert("hi"); }
    });

    // IF YOU KNOW CLASSNAME ELEMENTS ARE INSIDE A FIXED ELEMENT:

    $('#FixedID').on({
       keypress: function () { alert("hi"); }
    }, '.ClassName');

关于您的编码风格，您应该将事件处理程序和处理事件的函数分开。例如，处理程序也执行代码，而不是这样：

// one function that does everything!!
$(document).ready(function() {
    // bind events
    $('#SomeID').on({

       click: function () {
         // huge wall of code that handles events
       },
       mouseenter: function () {
         // another huuuuuuuge wall of code here
       }
    )};
});

你应该有这样的东西：

$(document).ready(function () {
    BindHandlers();
    DoSomethingElseWithPageInit();
}); 

function BindHandlers() {
// handlers do just the handling of events; easy to see and understand
   $('#SomeID').on({
      click: function (e) { ClickOnSomeID(e); },
      mouseenter: function () { MouseEnterOnSomeID(); }
   )};
}

// here are the functions that process the event
function ClickOnSomeID(e) { ... }
function MouseEnterOnSomeID() { ... }

【讨论】：

值得补充的是，对于动态元素，您应该在 DOMReady 时与目标元素最近的祖先上调用on()。
@DavidThomas：是的，当然！ OP 没有提供他的 HTML 结构；进行了编辑
可能是对的，但在我的情况下，它不起作用，但我知道的是，在backbone.js 中，我使用delegateEvents() 方法来阻止这类问题，但我在这里没时间做..
把你的代码放到 jsfiddle 里，这样我们就可以更仔细的看问题了。 .on() 是要走的路；像魅力一样工作。
我得到了答案，live 方法有效：$(".classname").live("keypress",function(){ alert("keypressed"); });

【解决方案2】：

正如 frenchie 所说，这是因为您的 html 结构发生了变化。这已被 .live() 正确处理，但现在 .on() 是继任者。但是你不应该在元素上使用 on()，而应该在文档上使用：

$(document).on("keypress", "#id", function(){
alert("event happened");
})

【讨论】：