时间戳

首页 > 解决方案 > javascript添加的按钮不触发点击事件

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

当我单击按钮时，此 javascript 代码会复制它并添加新内容（我不知道如何复制一段类似 Laravel 的代码，@yell所以我只是复制了整个 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>'
   );
});

问题是：它完美无缺，但仅适用于第一个按钮。
如果我继续单击第一个按钮，它会继续复制结构。但是如果我点击复制的按钮，它就不起作用。没有错误只是没有任何反应。为什么会发生这种情况？

标签： javascripthtml

解决方案

这应该有效。当您这样做时，您正在向页面添加动态 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);
});

推荐阅读