Как изменить 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>