jQuery：变量ID不更新

Question

我想拥有一个按键功能，可以更改光标在输入字段中的位置。 当jQuery id仅是“ body”时，它可以工作，但是keydown随处都可以工作。 相反，我希望keydown仅在最近生成的输入字段中起作用。 请参见下面的代码。

var ui_pc = 3001;

$(document).ready(function () {
  $("#"+ui_pc+"input").keydown(function(e){
    var press = e.which;
    press = press.toString();
    if(e.which=="13") {
      ui_pc++;
      $("#main").append("<div id=\"" + ui_pc + "\"><input id=\""+ ui_pc+ "input\"></input></div>");
      document.getElementById(ui_pc+"input").focus();
    }
  });
});

由于光标从第3001行开始，因此当您将光标放在那里时，它可以正常工作。 但是，该函数不会更新，即该函数仅在div“＃3001input”上起作用，并且不会使用名为pc_ui的变量进行更新。

为什么会这样呢？ 我认为这与JS中的闭包有关吗？

Answer 1

您必须更改为委托事件方法：

$(document).on('keydown', '[id$="input"]', function(e){
   //your stuff
});

为什么这个？

之所以产生这种情况，是因为在DOM准备就绪时将事件附加到现有元素上，而不是将事件附加到现有元素上。 为避免这种情况，请使用此委派方法，它会起作用。

查看更多：

https://learn.jquery.com/events/event-delegation/

Answer 2

您可以取消之前的输入绑定并绑定到最新的输入，因为您希望它在最新生成的输入字段上起作用。

 var ui_pc = 3001; $(document).ready(function(){ bindToNewInput(); }); function appendNewInput(e) { var press = e.which; press = press.toString(); if(e.which=="13") { ui_pc++; $("#main").append("<div id=\\"" + ui_pc + "\\"><input id=\\""+ ui_pc+ "input\\"></input></div>"); document.getElementById(ui_pc+"input").focus(); bindToNewInput(); } } function bindToNewInput() { $("#"+(ui_pc-1)+"input").off('keydown'); $("#"+ui_pc+"input").keydown(function(e){ appendNewInput(e); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="main"> <input id="3001input" type="text"/> </div>