jQuery click事件无法正常运行

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(){

直接事件=> 委托事件

现场演示

完整代码：

$('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文档上

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/

请注意：您应该使用$(this)因为您的even已绑定到.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...其捕获在树的中间$("div").on...