jQuery:变量 ID 未更新

jQuery: Variable ID not updating

本文关键字：更新 ID 变量 jQuery      更新时间：2023-09-26

我想要一个按键功能来改变光标在输入字段中的位置。当jQuery id只是"body"时，它就可以工作，但随后键控在任何地方都有效。相反，我希望键控仅在最近生成的输入字段中起作用。请参阅下面的代码。

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中的闭包有关？

必须更改为委派事件方法：

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

为什么会这样？

这是因为您在 DOM 准备就绪时将事件附加到现有元素，而不是用于创建的新元素。若要避免这种情况，请使用此委派方法，它可以工作。

查看更多：

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

您可以取消绑定以前的输入并绑定到最新输入，因为您希望它适用于最近生成的输入字段。

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>

相关文章：