套接字發出后創建按鈕，但單擊后無任何反應

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/

委派的事件處理程序的優勢在於，它們可以處理來自以后在添加到文檔中的后代元素的事件。 通過選擇保證在附加委托事件處理程序時會出現的元素，您可以使用委托事件來避免頻繁附加和刪除事件處理程序的需要。