单击时如何将html文本更改为按钮的值？

Question

只是一个一直困扰我的关于我的代码的问题，这是这样的：

我的代码：用户创建一个按钮（工作）单击该按钮时，jQuery 获取该按钮的值并将其显示在页面上的段落文本中（部分工作）

问题：当我作为测试人员在原始代码中创建的按钮被点击时，这是有效的。 但是，用户新创建的按钮不会更改段落文本文本。

HTML 测试按钮代码：

        <button id="1" class="createdGroupsButton">TEST1</button>
        <button id="2" class="createdGroupsButton">TEST2</button>
        <button id="3" class="createdGroupsButton">TEST3</button>

按钮的 jQuery onClick 函数：

      $(".createdGroupsButton").on('click', function(event) {
        event.stopPropagation();
        event.stopImmediatePropagation();
        let id = (event.target.id);
        let name = document.getElementById(id).innerHTML;
        document.getElementById("currentGroup").innerHTML = name;
      });

创建用户制作的按钮的jQuery：

let newGroup = $(`<button id='${userInput}' class='createdGroupsButton'>${userInput}</button>`);

userInput 是一个先前创建的变量，它从用户输入的文本框中获取值。

到目前为止的代码： CodePen 片段

Answer 1

尝试使用委托方法，它将事件附加到稍后添加到文档的元素。

改变：

$(".createdGroupsButton").on('click', function(event) {

到：

$('body').on('click', '.createdGroupsButton', function(event) {

演示：

 $('body').on('click', '.createdGroupsButton', function(event) { event.stopPropagation(); event.stopImmediatePropagation(); let id = (event.target.id); let name = document.getElementById(id).innerHTML; document.getElementById("currentGroup").innerHTML = name; }); let userInput = 'ANOTHER'; let newGroup = $(`<button id='${userInput}' class='createdGroupsButton'>${userInput}</button>`); $('body').append(newGroup);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="1" class="createdGroupsButton">TEST1</button> <button id="2" class="createdGroupsButton">TEST2</button> <button id="3" class="createdGroupsButton">TEST3</button> <div id="currentGroup"></div>