Javascript Jquery单击事件工作不正常

我希望在单击最新生成的文本框时，会附加一个新的文本输入框

但它只在我单击第一个文本输入框时生成新的文本输入框。那么，有什么解决办法吗

<script type="text/javascript">
$(function(event){
  $('.add-new').click(function(){
    $('.add-new').removeClass();
    $('form').append("<br><input type='text' name='user[]' class='add-new'/>");      
  });
});

</script>

<div>
  <form method='post' name='login'>
    <input type='text' name='user[]' class='add-new'/>
  </form>
</div>

$（功能（事件）{
$（'.add new'）。单击（函数（）{
$（'.add new'）.removeClass（）；
$（'form'）。追加（
）；
});
});

直接事件=>委托事件

完整代码：

$('form').on('click', '.add-new', function() {
    $(this).removeClass('add-new');
    $(this).closest('form').append("<br><input type='text' name='user[]' class='add-new'/>");
});​

$（'form'）。在（'click'，'addnew'，function（）上{
$（this.removeClass（'add-new'）；
$（this）.最近的（'form'）。追加（
）；
});​

事件处理程序仅绑定到当前选定的元素；在代码调用.on（）时，它们必须存在于页面上。要确保元素存在并且可以选择，请在页面上HTML标记中的元素的文档就绪处理程序中执行事件绑定。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委派事件来附加事件处理程序，如下所述

委托事件的优点是，它们可以处理来自后代元素的事件，这些子元素将在以后添加到文档中。通过选择在附加委派事件处理程序时保证存在的元素，可以使用委派事件来避免频繁附加和删除事件处理程序

演示

请注意：您应该使用

$（this）

，因为您的偶数已绑定到

。请添加新的

其余所有这些都是很好的解决方案

希望这有帮助，干杯

代码

$(function(event){
  $('.add-new').on('click', function(){
    $(this).removeClass();
    $('form').append("<br><input type='text' name='user[]' class='add-new'/>");      
  });
});​

$（函数（事件）{
$（'.add new'）。在（'click'，function（）上{
$（this.removeClass（）；
$（'form'）。追加（
）；
});
});​
这不起作用的原因是，当您设置“单击”事件时，您的目标不存在，因此没有任何“单击”事件绑定到它

jQuery有一个名为“on”的奇特函数，用于捕获冒泡事件

$(document).on('click','.add-new', function(){

}

所有事件（单击、鼠标悬停等）都从最深的节点开始，并在html树中弹出，直到文档结束。在文档中捕获它们是安全的，除非您明确地调用“停止传播”或在BULL点击处理函数的中间处理返回false。
您也可以在树的中部用“代码> $$（“窗体”）捕获它。在…< /代码>或甚至<代码> $（“div”）上。在…< /代码> < /p> <代码> $（“添加新”）。代码>将从所有元素中删除所有类。我觉得这不是OP想要的。他的问题是关于点击事件，不是关于他在里面的代码，我只是复制粘贴了它。但我现在会删除它我很高兴给我的+1<代码>：）
谢谢@gdoron。真的吗helps@ShahriarMahmood. 没问题。如果您真的想提高jQuery技能，请阅读我答案中的文档。祝你好运
$(container).on(eventName, target, handlerFunction)

$(function(event){
  $('.add-new').on('click', function(){
    $(this).removeClass();
    $('form').append("<br><input type='text' name='user[]' class='add-new'/>");      
  });
});​

$(document).on('click','.add-new', function(){

}