Question

因此，基本上，我正在将html加载并插入到主页上的div元素中。一切正常，除了我意识到我的常规href链接不起作用。当我将鼠标悬停时，URL照常出现在Chrome的底部，但是当我单击时，没有任何反应。

对于我所看到的，似乎单击事件可能无法在动态添加的元素上正常运行？

问题是，我只看过jQuery的解决方案，并且坦率地说，我什至不确定这根本不是问题。

有什么想法吗？

// -------------------------- get the elements ----------------------- //
const deskbar = document.querySelector('#deskbar');
const screen = document.querySelector('#desktop');
const menuLink = document.querySelector('#primaryNav');
const tabsList = document.querySelector('#tabsList');
const clock = document.getElementById('theTime');
const desktop = document.querySelector('#contentarea');


// -------------------------- create events -------------------------- //
  screen.addEventListener('click', toggleMenu);
  tabsList.addEventListener('click', activateTab);
  menuLink.addEventListener('click', openWindow);
  menuLink.addEventListener('click', generateTab);

// -------------------------- open windows --------------------------- //
function openWindow(e) {
  let windows = document.querySelectorAll('.window');
  let openWindows = [];

  windows.forEach(function(theWindow){
    openWindows.push(theWindow.getAttribute('data-window'));
  });

  if(e.target.classList.contains('menuLink') && !openWindows.includes(e.target.getAttribute('data-link'))) {
    let newWindow =`<div class="window" id="${e.target.getAttribute('data-link')}" data-window="${e.target.getAttribute('data-link')}">
  <header class="header"></header>
  <span class="close"></span>
  <div class="headerContent">
    ${e.target.innerText}
    <span class="minimize"></span>
  </div>
  <article>
    <div class="content"></div>
  </article>
</div>`;
desktop.insertAdjacentHTML('afterbegin', newWindow);
fetchPage(e.target.href, e.target.getAttribute('data-link'));
  }
  windows = document.querySelectorAll('.window');

  // create add event listener for each new window
  windows.forEach(function(theWindow){
theWindow.addEventListener('click', closeWindow);
theWindow.addEventListener('click', closeTab);

if(window.matchMedia("(min-width: 960px)").matches) {
  theWindow.getElementsByClassName('headerContent')[0].onmousedown = function(event) {
    let shiftX = event.clientX - theWindow.getBoundingClientRect().left;
    let shiftY = event.clientY - theWindow.getBoundingClientRect().top;

    deactivateAllWindows();

    theWindow.classList.add('activeWindow');
    theWindow.style.position = 'absolute';
    theWindow.style.zIndex = 15;

    desktop.append(theWindow);
    moveAt(event.pageX, event.pageY);

    // centers the ball at (pageX, pageY) coordinates
    function moveAt(pageX, pageY) {
      theWindow.style.left = pageX - shiftX + 'px';
      theWindow.style.top = pageY - shiftY + 'px';
    }

    function onMouseMove(event) {
      moveAt(event.pageX, event.pageY);
    }

    // move the window on mousemove
    document.addEventListener('mousemove', onMouseMove);

    // drop the window, remove unneeded handlers
    theWindow.onmouseup = function() {
      document.removeEventListener('mousemove', onMouseMove);
      theWindow.onmouseup = null;
    };
  };
  theWindow.ondragstart = function() {
    return false;
  };
}
  });

  e.preventDefault();
}

// -------------------------- fetch html content --------------------- //
function fetchPage(url, attribute) {
  let windows = document.querySelectorAll('.window');
  fetch(url)
  .then(function(response) {
    return response.text();
  })
  .then(function(body) {
    windows.forEach(function(theWindow) {
      theWindow.style.zIndex = 14;
  theWindow.classList.remove('activeWindow');
});
windows.forEach(function(theWindow) {
  if(theWindow.getAttribute('data-window') == attribute) {
    if(window.matchMedia("(min-width: 960px)").matches) {
      let randomHeight = Math.floor(Math.random() * (40 - 20 + 1)) + 20;
      let randomWidth = Math.floor(Math.random() * (40 - 20 + 1)) + 20;

      theWindow.style.zIndex = 15;

      theWindow.style.top = randomHeight + '%';
      theWindow.style.left = randomWidth + '%';

      setTimeout(function(){
        theWindow.style.opacity = 1;
      }, 125);
    }

    theWindow.classList.add('activeWindow');

    let content = theWindow.querySelector('.content');
    content.innerHTML = body;
  }
});
  });
}

如何使用香草JavaScript（无jQuery）修复Ajax加载内容上的href链接

0 个答案: