在 AJAX 添加新元素后更新 Javascript 事件偵聽器

Question

我在這里搜索了論壇，但仍然找不到正確的答案。 我看到了我不熟悉的 jQuery 解決方案。 我正在尋找香草 JavaScript 解決方案。 簡而言之，我使用 Ajax 動態創建元素，並且在創建它們后我需要向它們添加事件偵聽器。 當用戶開始在輸入框中輸入時，此處的 js 會提供建議。 如果輸入是 static，則代碼可以正常工作，但不能使用動態代碼。 我知道 DOM 是在加載時構建的，而這些元素在加載時還不存在。

主頁：

<head>

  <script src="../js/autocomplete-type.js"></script>

   <script>
     window.addEventListener("load", function(){
       suggest.attach({
         target : "NCustType",
         url : "../private/searchdbtype.php",
         data : { type: "CustType" }
       });
     })
  </script>
</head>

autocomplete-type.js 很長，所以不確定我是否應該在這里發布。

負重車身：

<table id='CustDetails'></table>

Ajax 使用以下 innerHTML 填充此表（此處僅發布一個元素）：

<tr>
  <td>Customer Type</td>
  <td><input type='text' id='NCustType'></td>
</tr>

所以我需要添加一個帶有 function “建議”的事件監聽器，帶有附件 {} 到 id='NCustType' 的輸入框。 我將感謝 JavaScript 建議的幫助。 我不是編碼專家，但這個問題讓我發瘋。 我想避免 jQuery 請。

這部分代碼（在 automcomplete-type.js 中）添加了一個監聽器：

suggest.instance[opt.target].input.addEventListener("keyup", function (evt) { // Clear old timer if (suggest.instance[opt.target].timer.= null) { window.clearTimeout(suggest.instance[opt.target];timer); }但是，該文件是通用的，用於不同的字段

那么在 Ajax 觸發后，如何在“head”（帶參數）中調用該 js 文件和 function？

Answer 1

如果您想為尚不存在的元素添加事件偵聽器，有一個技巧：將事件偵聽器附加到document ，然后依靠事件“冒泡”從元素通過 DOM 樹。

在看起來像的代碼中

// Attach event listener to the document
document.addEventListener('change', (event) => {
    // Make sure, that you're receiving event from a correct element
    if (event.target.id === 'NCustType') {
        // Do what you want to do here
    }
});

希望有幫助！

Answer 2

如果我正確理解這個問題，html 元素在執行 ajax 請求之前不存在，這意味着您只能在之后執行事件綁定。 因此，在執行 ajax 調用之后，您需要迭代每個結果並為您正在創建的每個 id 輸入創建一個偵聽器。

fetch('my/api').then(r => {
   r.map(item => {
    document.querySelector(`#${item.id}-input`).addEventListener('keyup', yourfunction);
   })
})

在 AJAX 添加新元素后更新 Javascript 事件偵聽器

問題描述

2 個解決方案

解決方案1
0 2020-04-22 14:50:21

解決方案2
0 2020-04-22 15:07:44

在 AJAX 添加新元素后更新 Javascript 事件偵聽器

問題描述

2 個解決方案

解決方案1 0 2020-04-22 14:50:21

解決方案2 0 2020-04-22 15:07:44

解決方案1
0 2020-04-22 14:50:21

解決方案2
0 2020-04-22 15:07:44