javascript - 附加后输入相关功能未运行

Question

我有以下代码，它将文本输入附加到焦点上，如果输入为空，则将其隐藏。问题是它仅适用于原始输入字段，生成的第二个输入字段不会在焦点上激活此功能。任何想法为什么？

$('input:text')
.on('focus', function()
{
  var $this = $(this);
  if ($this.val() == "")
  {
    numItems++;
    $($this.parent().append($('<input type="text" value ="" id="item' + numItems + '"></input>')));
  }
})
.on('blur', function()
{
  var $this = $(this);
  if ($this.val() == "")
  {
    $this.hide();
  }
});

Answer 1

尝试改变：

$('input:text')
.on('focus', function()

到

$(document)
.on('focus','input:text', function()

Answer 2

或者，您可以委托给要附加输入的直接父级。

$("#parentOfInput").on('focus','input:text', function(){
    //Handler
});

这比@sudhir 的回答更有效。

这将确保事件在它一直冒泡到文档根之前被拦截。