javascript - 按钮是在套接字发射后创建的，但单击时没有任何反应

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!');
});

为什么单击创建的按钮时没有任何响应？任何帮助表示赞赏！

标签： javascriptjquerysockets

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/

委托事件处理程序的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。