javascript - 如何获取动态创建的元素的值

Question

我正在研究 API 和动态创建的这个 HTML 代码

 <li  class="d-flex align-item-center  movieId">
                     
    <a class=" d-flex w-100" data-mov="${res[i].id}">             
      <img src="https://image.tmdb.org/t/p/w500${res[i].poster_path}" class="img-fluid himg" 
       alt="${res[i].title}" style="width:60px; height:70px">

        <p class=" p-3"> ${res[i].title}</p>
     </a>
              
  </li>

我希望当我点击<a>标签时我得到data-mov属性值......我确实解决了它但是当我点击里面的任何元素<a>并且<img>没有得到值时<p>。data-mov但是，这些元素在里面。

这就是我想要做的

 $(".srearchResults ul").on("click", "a", function (event) {

       
        let id = event.target.getAttribute("data-mov");

        console.log(id);

        //$(this).find("a").data("mov");
        //$(this).find("a").attr("data-mov");
});

这两行注释我使用并且未定义。当点击<p>或<img>我得到 null 时，解决方案是什么？

标签： javascripthtmljqueryecmascript-6

Answer 1

香草 JavaScript 解决方案：

const ulElement = document.querySelector("ul");

ulElement.addEventListener("click", function (e) {
  let element = e.target;
  let liElement;

  while (element && element.nodename !== "UL") {
    if (element.nodeName === "LI") {
      liElement = element;
    }
    element = element.parentElement;
  }

  const anchor = liElement.querySelector('a');

  console.log(anchor.dataset.mov);
});

<ul>
  <li>
    <a data-mov="data-mov-1">
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="100">
      <p>1</p>
    </a>
  </li>
  <li>
    <a data-mov="data-mov-2">
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="100">
      <p>2</p>
    </a>
  </li>
</ul>