javascript 使用 AJAX 添加新元素后删除了元素单击事件

ecr0jaav 于 2023-01-29 发布在 Java

关注(0)|答案(2)|浏览(135)

我正在尝试用python flask框架和vanilla JS制作一个动态加载图片的图库应用程序。另外，我制作了一个完整的图片查看器，所以当你点击一张图片时，它会以更大的比例打开。
当我第一次打开页面时，一切正常。但是当加载新图像时，触发完整查看器的event在图库中的所有图像上都被删除了。
原因是什么？
这是代码。

Python。正在发送图像列表url：

@app.route('/loadmore', methods=['GET'])
def load_more():
    return jsonify(get_images(5))

JS. XMLHttpRequest获取图像的URL：

function loadMore() {
  let xhr = new XMLHttpRequest();
  xhr.onreadystatechange = () => {
    if (xhr.readyState == 4 && xhr.status == 200) {
      addImages(xhr.responseText);
    }
  };

  xhr.open("GET", "/loadmore", true);
  xhr.send();
}

JS.向HTML添加新图像：

function addImages(paths) {
  let images = document.getElementById("images");
  paths = JSON.parse(paths);
  paths.forEach((path) => {
    images.innerHTML += `<img class="grid-image" src="static/images/${path}">`;
  });
}

加载新图像之前

加载新图像后

JavaScript

来源：https://stackoverflow.com/questions/75268372/element-click-event-removed-after-adding-new-element-with-ajax

2条答案

按热度按时间

qhhrdooz1#

解决方案之一：每次加载新图像时，添加事件侦听器。

向HTML添加新图像

function addImages(paths) {
  let images_grid = document.getElementById("images");
  paths = JSON.parse(paths);
  paths.forEach((path) => {
    images_grid.innerHTML += `<img class="grid-image" src="static/images/${path}">`;
  });

  addClickEvent();
}

添加事件侦听器

function addClickEvent() {
  const images = document.querySelectorAll(".grid-image");
  images.forEach((el) => {
    el.addEventListener("click", (e) => {
      full_viewer.children[0].setAttribute("src", e.target.getAttribute("src"));
      full_viewer.classList.toggle("hidden");
    });
  });
}

赞(0）回复(0）举报 2023-01-29

jecbmhm32#

您可以在每个img标签上添加event。

function full_image_viewer(){}

function addImages(paths) {
  let images = document.getElementById("images");
  paths = JSON.parse(paths);
  paths.forEach((path) => {
  const img = document.createElement('img')
  img.className = 'grid-image';
  img.src = `static/images/${path}`;
  img.addEventListener('click',full_image_viewer )
  images.insertAdjacentElement('beforeend',img)
  });
}