Question

我有这个初始结构：

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

当我单击按钮时，此javascript代码将其复制并添加新内容（我不知道如何使用类似@yell的代码复制Laravel类代码，因此我只是复制了整个代码html）：

$('.addUser').click( function () {
   $('#content').append(     
      '<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>'
   );
});

问题是：它可以完美工作，但仅对第一个按钮有效。
如果我一直单击第一个按钮，它将继续复制该结构。但是，如果我单击复制的按钮，则无法使用。没有错误，什么都没有发生。为什么会这样呢？

Answer 1

这应该有效。当您在页面上添加动态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);
});

Answer 2

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

JavaScript添加的按钮未触发点击事件

2 个答案: