如何在 jquery 中动态添加的按钮上创建工作按钮？ [复制]答案

【问题标题】：How to create working buttons on buttons that have been added dynamically in jquery? [duplicate]如何在 jquery 中动态添加的按钮上创建工作按钮？ [复制]
【发布时间】：2020-12-15 09:26:47
【问题描述】：

我正在使用此处的示例：How to add a button dynamically using jquery

我想知道的是，如何在单击插入后创建的新按钮上添加 jquery 功能？

假设我点击了两次按钮，插入之后，所以我有了这两个新按钮。如何在按钮上添加功能？

我想重新创建的是： `

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
  </head>

  <body>
<button id = "btn_add> Add </button>  
   <div id= "container">
  <div id = "under_container"> 
 
 </div>
   </div>
  </body>

</html>`

$(document).ready(function () {
 $("#btn_add").click(() => {
        $('#container').append(`<div id="text">\
        <div id="title" >\
          Trial
        </div> \
        <button id="btn_addOther"> Add Other </button>
        </div>`); 
    })


 $("#btn_addOther").click(() => {
 $('#under_container').append(`<div id="card"> \
        <textarea placeholder="Title" type="text" >Title</textarea> \
        </div>`
        );
    });
});

所以，我想创建一个添加其他按钮的按钮，当创建新按钮时，它们应该能够在页面上创建其他内容。

【问题讨论】：

标签： javascript html jquery dom-events

【解决方案1】：

要实现您的目标，需要解决两个问题。首先，当您复制内容时，您需要更改 HTML 以使用类属性而不是 id，因为您不能在同一个 DOM 中多次复制相同的 id。

第二个问题是，由于页面加载后某些元素会添加到 DOM，因此您需要使用委托事件处理程序。

$(document).ready(function() {
  $(document).on('click', '.btn_add', () => {
    $('#container').append(`<div class="text"><div class="title">Trial</div><button class="btn_addOther">Add Other</button><div></div>`);
  });


  $(document).on('click', '.btn_addOther', () => {
    $('#under_container').append(`<div class="card"><textarea placeholder="Title" type="text" >Title</textarea></div>`);
  });
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button class="btn_add"> Add </button>
<div id="container">
  <div id="under_container"></div>
</div>

【讨论】：

【解决方案2】：

尝试使用$('body').on('click', "#btn_addOther", function () {...})

【讨论】：