javascript - 如何在 jQuery 中将 click 或其他处理程序附加到动态生成的 dom？

Question

我有带有单个文本输入的表单，我想向其中添加功能 - 单击时生成新的文本输入。这是我的代码：

HTML

<form>
   Fill:
   <input type="text" name="0" class="target"/>
   <br /><br /><br /><input type="submit" value="post it!" />
</form>

JS/jQuery

<script>
   var i=1;
   $(function(){
     $("input.target:last").on("click", function(){
      $("input.target:last").after("<br /> <input type='text' " +  "name='" + i +"'"  + ' class="target" />');
      i++;
      });
   });
</script>

这工作正常，但仅在单击第一个（非动态）生成的输入时。 我已经在 Firebug 中检查过，生成的输入很好——它们是用正确的类名生成的，并且 name 属性按预期递增——除了点击事件之外，一切都很好，除了第一个输入，非动态生成。

Answer 1

使用委托事件处理程序：

 $(function(){
    $("form").on("click","input.target:last", function(){
      $(this).after("<br /> <input type='text' " +  "name='" + i +"'"  + ' class="target" />');
         i++;
      });
   });

当第二个参数是选择器时，委托事件处理程序。文档