Кнопка создается после выброса сокета, но при нажатии ничего не происходит

Question

socket.on('find-match', () => {
  document.getElementById("find-match").innerHTML = '<button class="btn btn-success" id="find-match-btn">Find Match</button>'
});

$("#find-match-btn").on('click', () => {
    console.log('works!');
});

Почему я не получаю никакого ответа при нажатии на созданную кнопку?Любая помощь приветствуется!

Answer 1

Вы почти правильно поняли, но поскольку элемент, к которому вы хотите добавить слушателя, не существует, событие никогда не сработает.Вместо этого добавьте слушателя к телу, а затем определите, какой элемент будет его запускать:

setTimeout(() => { // Simulate async
  document.body.innerHTML = '<button class="btn btn-success" id="find-match-btn">Find Match</button>'
}, 1000);

$("body").on('click', '#find-match-btn', () => {
  console.log('works!'); // Check console - it won't print in the snippet
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

Дополнительная информация: http://api.jquery.com/on/

Делегированные обработчики событий имеют то преимущество, что ониможет обрабатывать события от элементов-потомков, которые добавляются в документ позднее.Выбрав элемент, который гарантированно будет присутствовать во время присоединения делегированного обработчика событий, вы можете использовать делегированные события, чтобы избежать необходимости часто подключать и удалять обработчики событий.

Answer 2

Этот фрагмент кода не добавит слушателя, как вы ожидаете, так как $("#find-match-btn") вернет пустой набор, потому что ваша кнопка все еще недоступна в DOM.

$("#find-match-btn").on('click', () => {
   console.log('works!');
});

Предполагая, что событие вашего сокета вызвано, добавьте вышеупомянутую логику в обратный вызов.

socket.on('find-match', () => {
  document.getElementById("find-match").innerHTML = '<button class="btn btn-success" id="find-match-btn">Find Match</button>'
  $("#find-match-btn").on('click', () => {
    console.log('works!');
  });
});