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

这段代码不会像您期望的那样添加侦听器，因为$("#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!');
  });
});

Answer 2

您几乎完全正确，但是由于您要添加侦听器的元素不存在，因此该事件将永远不会触发。而是将侦听器添加到主体，然后定义哪个元素将触发它：

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/

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

套接字发出后创建按钮，但单击后无任何反应

2 个答案: