Javascript 追加后输入相关函数未运行

我有下面的代码，它将文本输入附加到聚焦井中，并在输入为null时隐藏它。问题是它只适用于原始输入字段，生成的第二个输入字段不会在焦点上激活此功能。你知道为什么吗

$('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();
  }
});

$（“输入：文本”）
.on（'focus'，function（）
{
var$this=$（this）；
如果（$this.val（）==“”）
{
numItems++；
$（$this.parent（）.append（$（''））；
}
})
.on（'blur'，function（）
{
var$this=$（this）；
如果（$this.val（）==“”）
{
$this.hide（）；
}
});

尝试更改：

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

到

---

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

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

这比@sudhir的答案稍微有效一些

---

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

请使用

.on（）稍作解释

with a element仅将该行为附加到函数运行时存在的该类型元素上——如果随后向DOM添加额外元素，则不会在其上注册该行为。如果您将行为委托给文档，那么它还将包含稍后添加的匹配元素。查看更多详细信息（特别是在“直接和授权活动”标题下）。感谢您的出色工作！感谢Zaid的解释，这很有意义。不用担心，如果你想进一步阅读，可以添加到文档的链接：）

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