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

您可以解除之前输入的绑定并绑定到最新输入，因为您希望它可以在最近生成的输入字段上工作。

＆＃13;

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);
	});
}

＆＃13;

<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>

＆＃13;

jQuery：变量ID未更新

2 个答案: