Question

我想在点击最新生成的文本框时附加一个新的文本输入框。

但只有当我点击第一个文本输入框时，它才会生成新的文本输入框。那么，任何解决方案？

<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>

Answer 1

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

直接事件=＆gt; 委派活动

Live DEMO

完整代码：

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

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

委派事件的优势在于它们可以处理稍后添加到文档中的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。

on docs

Answer 2

$('form[name=login]').on('click', '.add-new', function() {
    $(this).removeClass(); // $(this) instead of $('.add-new') 
                           // $(this) point to the clicked element
                           // which you want

    $('form').append("<br><input type='text' name='user[]' class='add-new'/>");
});

当您更改类名add-new并使用相同的类动态追加新元素时，您需要委托事件。

详细了解.on()

注意

委托事件的.on()语法

$(container).on(eventName, target, handlerFunction)

Answer 3

演示 http://jsfiddle.net/JuvwB/8/

Plz注意：您应该使用$(this)，因为您的偶数已经绑定到.add-new。

休息所有以上都是很好的解决方案，

希望这会有所帮助，欢呼

<强>码

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

Answer 4

这不起作用的原因是因为当你设置'click'事件时你的目标不存在，所以没有'click'事件被绑定到它。

jQuery有一个名为'on'的功能，可以捕获冒泡事件。

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

}

所有事件（点击，鼠标悬停等）都从最深的节点开始，然后通过html树向上冒泡，直到文档。您可以安全地在文档中捕获它们，除非您在循环单击处理函数的中间显式调用“stopPropagation”或返回false。

您还可以使用$("form").on...甚至$("div").on...

在树的中间捕获它

Jquery点击事件无法正常工作

4 个答案:

注意