將JQuery轉換為純Javascript：將事件偵聽器添加到動態創建的元素中

Question

我已經嘗試了堆棧溢出時可用的大多數問題/答案，但似乎找不到解決方案。

我試圖在下面的代碼中重新創建JQuery函數以使用Vanilla JavaScript。

JQuery非常出色，但我目前正在將現有網頁轉換為免費的JQuery。

我最大的問題是遍歷dom，尤其是在棘手的情況下-如下面的代碼所示！

---

這是代碼示例：

 function getList() { let listURL = 'list.php'; fetch(listURL) .then((response) => response.json()) .then((data) => { let html = ''; html += `<ul class="col-sm-2 list-unstyled"><li><p class="title">Item List:</p></li>`; let counter = 0; let limit = 3; for (let key in data) { let d = data[key]; html += `<li data-desk="${d.mReference}"><a><span class="d-title">${d['mDescription']}</span></a></li>`; if (++counter > limit) { html += `</ul><ul class="col-sm-2 list-unstyled"><li><p class="title">Item List:</p></li>`; counter = 0; } } html += `</ul>`; document.getElementById('itemList').insertAdjacentHTML('afterbegin', html); }); } //This Works $(document).on('tap touchstart click', '#itemList li', function(e) { var text = ($(e.target).closest('li').data('desk')); window.location.replace('dashboard.html#' + text); location.reload(true); }); 

 <div class="row" id="itemList"></div> <!-- DYNAMICALLY ADDED HTML --> <ul class="col-sm-2 list-unstyled"> <li> <p class="title">Machine:</p> </li> <li data-desk="item1"><a><span class="d-title">Item 1</span></a></li> <li data-desk="item2"><a><span class="d-title">Item 2</span></a></li> <li data-desk="item3"><a><span class="d-title">Item 3</span></a></li> <li data-desk="item4"><a><span class="d-title">Item 4</span></a></li> </ul> 

我嘗試了不同的變化，但沒有喜悅：

document.addEventListener('click touchstart', function (e) {
if (e.target.matches('li')) {
    let selectedListItem = e.target.closest('li').data('desk');
    window.location.href = 'dashboard.html#' + selectedListItem 
    location.reload(true);
  }
}, false);


let dropDown = QSA('#itemList *');  //querySelectorAll
dropDown.addEventListener('click touchstart', function (e) {
if (e.target.matches('li')) {
    let selectedListItem = e.target.closest('li').data('desk');
    window.location.href = 'dashboard.html#' + selectedListItem 
    location.reload(true);
  }
}, false);


document.querySelector('body').addEventListener('click touchstart', function(e) {
  if (e.target.tagName.toLowerCase() === 'li') {
   let selectedListItem = e.target.closest('id').data('desk');
   window.location.href = 'dashboard.html#' + selectedListItem 
   location.reload(true);
  }
});

document.getElementById("itemList").addEventListener("click 
touchstart",function(e) {
  if (e.target && e.target.matches("ul li")) {
      let selectedListItem = e.target.closest('li').data('desk');
      window.location.href = 'dashboard.html#' + selectedListItem ;
      // window.location.replace('dashboard.html#' + selectedListItem 
      location.reload(true);
  }
}, false);

---

任何幫助/方向將不勝感激！

Answer 1

所以，謝謝@Teemu和@daddygames的指導。

document.addEventListener('click', function (event) {
let dropDown = document.querySelector('#itemList ul');
dropDown.addEventListener('click', function (e) {
    if (e.target && e.target.nodeName == "LI") {
        let itemList = e.target.closest('li').getAttribute('data-desk');
        window.location.replace('dashboard.html#' + itemList);
        location.reload(true);
    }
});
},false);

當單擊li標記中的span元素時，它們不會冒泡，因此向其添加了以下類，該類可以使用： style="pointer-events: none;"

我在css-tricks上找到了此解決方案： css-tricks