0

当我单击最新生成的文本框时，我希望添加一个新的文本输入框。

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

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

4 回答 4

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

于 2012-06-24T09:02:45.223 回答
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)
于 2012-06-24T09:03:02.080 回答
2

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

请注意：你应该使用$(this)你的偶数已经绑定.add-new。

以上都是不错的解决方案，

希望这有帮助，干杯

代码

$(function(event){
  $('.add-new').on('click', function(){
    $(this).removeClass();
    $('form').append("<br><input type='text' name='user[]' class='add-new'/>");      
  });
});​
于 2012-06-24T09:04:32.430 回答
1

这不起作用的原因是因为当您设置“点击”事件时，您的目标不存在，所以没有“点击”事件绑定到它。

jQuery 有一个花哨的函数，称为“on”函数，它可以捕捉冒泡事件。

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

}

所有事件（单击、鼠标悬停等）都从最深的节点开始，并在 html 树中向上冒泡，直到文档。在文档中捕获它们是安全的，除非您明确调用“stopPropagation”或在冒泡点击处理函数中间处理的返回 false。

你也可以在树中间抓住它，$("form").on...甚至$("div").on...

于 2012-06-24T09:05:06.877 回答