Jquery .keypress动态添加输入

我目前正在通过.click事件添加输入，然后想要收听此输入上发生的任何按键。 但是，附加后不会触发任何事件（即模糊，按键，焦点）。 有没有人有什么建议？ 提前致谢！

$("#recipientsDiv").click(function(){ $(this).append('') $("#toInput").focus(); }); $("input").keypress(function(e){ var inputStr = $(this).html(); $("#inputCopier").text(inputStr); var newWidth = $("#inputCopier").innerWidth; $(this).css("width", newWidth); }); $("#toInput").blur(function(){ $("#toInput").remove(); }); 

我也尝试过.keyup .keydown，它们不起作用。

Answer 1

为了捕获blur / focus事件，为什么不在将其添加到DOM之前将处理程序添加到创建的元素中？

 $('#recipientsDiv').click (function() { $('< input type="text" id="toInput" class="inlineBlockElement" style="border:0px none #ffffff; padding:0px; width:20px; overflow:hidden;" />') .keypress (function (e) { ... }) .blur (function (e) { $(this).remove () }) .appendTo ($(this)) .focus () ; }); 

Answer 2

您的keypress处理程序仅添加到添加它时存在的元素。

无论何时添加，都需要调用live方法将其添加到与选择器匹配的每个元素。

例如：

 $("input").live('keypress', function(e){ var inputStr = $(this).html(); $("#inputCopier").text(inputStr); var newWidth = $("#inputCopier").innerWidth; $(this).css("width", newWidth); }); 

Answer 3

回应你的评论：

如您所见， live方法不支持blur事件。

作为一种变通方法，您可以在每次添加元素时手动添加处理程序，如下所示：

 $("#recipientsDiv").click(function(){ $(this).append('< input type="text" id="toInput" class="inlineBlockElement" style="border:0px none #ffffff; padding:0px; width:20px; overflow:hidden;" />') $("#toInput") .focus() .blur(function(){ $("#toInput").remove(); }); }); 

Answer 4

你可以试试

 $("input").live("keypress", function (e) { alert(e.keyChar); });