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的指导。

sno

li标记中的span元素在单击时不会冒泡，因此向其添加了以下类，该类可以使用：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);

我在CSS技巧中找到了此解决方案：css-tricks

将JQuery转换为纯Javascript：将事件侦听器添加到动态创建的元素中

1 个答案: