單擊時如何將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>