javascript添加的按钮未触发单击事件

我有一个初始结构：

 <section id="content">
      <div class="container participant">
         <div class="row">

            <div class="input-group">
               <div class="input-group-prepend">
               <span class="input-group-text">Name & Tickets</span>
               </div>

               <input type="text" aria-label="name" class="form-control">
               <input type="text" aria-label="tickets" class="form-control">

               <div class="input-group-append">
                  <button class="addUser btn btn-outline-secondary" type="button">
                     <i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="Add participante"></i>
                  </button>
               </div>
            </div>

         </div>
      </div>
   </section>  

问题是：它工作完美，但只适用于第一个按钮。
如果我继续单击第一个按钮，它将继续复制结构。但是如果我点击复制按钮，它就不起作用了。没有错误，只是什么都没有发生。

---

为什么会发生这种情况？

因为新按钮不是第一个按钮。浏览器跟随的是初始按钮，而不是其他按钮。您可以添加一个函数调用，作为

onclick

属性内联执行。

因为新按钮不是第一个按钮。浏览器跟随的是初始按钮，而不是其他按钮。您可以添加一个函数调用，作为

onclick

属性进行内联操作。

这应该可以。当您将动态DOM添加到页面时，您必须以静态元素为目标，然后向下触摸并触发动态元素与固化类的偶合

// cache the DOM that you want to add.
var newDom = $('<div class="container">'+
         '<div class="row">'+         
            '<div class="input-group">'+
               '<div class="input-group-prepend">'+
               '<span class="input-group-text">Nome & Tickets</span>'+
            '</div>'+

            '<input type="text" aria-label="name" class="form-control">'+
            '<input type="text" aria-label="tickets" class="form-control">'+

            '<div class="input-group-append">'+
               '<button class="addUser btn btn-outline-secondary" type="button">'+
                  '<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="Add participante"></i>'+
               '</button>'+
            '</div>'+
         '</div>'+
      '</div>'+
   '</div>'
   );


$('#content').on('click', '.addUser',  function (e) {
   e.preventDefault();
   $(this).append(newDom);
});  

//缓存要添加的DOM。
var newDom=$（“”+
''+         
''+
''+
“诺姆与门票”+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''
);
$（'#content'）。on（'click'，'.addUser'，函数（e）{
e、 预防默认值（）；
$（this.append（newDom）；
});  

这应该行得通。当您将动态DOM添加到页面时，您必须以静态元素为目标，然后向下触摸并触发动态元素与固化类的偶合

// cache the DOM that you want to add.
var newDom = $('<div class="container">'+
         '<div class="row">'+         
            '<div class="input-group">'+
               '<div class="input-group-prepend">'+
               '<span class="input-group-text">Nome & Tickets</span>'+
            '</div>'+

            '<input type="text" aria-label="name" class="form-control">'+
            '<input type="text" aria-label="tickets" class="form-control">'+

            '<div class="input-group-append">'+
               '<button class="addUser btn btn-outline-secondary" type="button">'+
                  '<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="Add participante"></i>'+
               '</button>'+
            '</div>'+
         '</div>'+
      '</div>'+
   '</div>'
   );


$('#content').on('click', '.addUser',  function (e) {
   e.preventDefault();
   $(this).append(newDom);
});  

//缓存要添加的DOM。
var newDom=$（“”+
''+         
''+
''+
“诺姆与门票”+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''
);
$（'#content'）。on（'click'，'.addUser'，函数（e）{
e、 预防默认值（）；
$（this.append（newDom）；
});  

这是因为它是动态创建的，具有不同的方式将事件侦听器附加到它们。请看下面的答案：您对更改HTML感到满意吗？因为我认为您正在添加多个按钮，只需添加另一行即可。@AnaLizaPandac答案有效。谢谢Bibberty是的，当然。这是因为它是动态创建的，有一种不同的方式将事件侦听器附加到它们。请看下面的答案：您对更改HTML感到满意吗？因为我认为您正在添加多个按钮，只需添加另一行即可。@AnaLizaPandac答案有效。谢谢Bibberty是的，当然。这是一个很好的解决方案，但我认为他添加了一个按钮，实际上应该只在那里出现一次。回答得不错。这是一个很好的解决方案，但我认为他添加了一个按钮，实际上应该只在那里出现一次。回答得不错。