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

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 解决方案是什么？

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>

Answer 2

使用event.target时，它会 select 你点击的元素不是a并且img和p没有data-mov它将 output null 或 undefined let id = $(this).data("mov"); ..) 你需要使用let id = $(this).data("mov"); 相反..不需要使用.find('a')因为$(this)将为您提供 select a并且在单击a a 内没有嵌套a

这就是您的代码的工作方式 [data-mov added to the img] 因此，当您单击 img 时，您将获得 img 的data-mov

 let res = [ { 'id': 1, 'poster_path': 234, 'title': 'anything' }, ] $('ul').append(`<li class="d-flex align-item-center movieId"> <a class=" d-flex w-100" data-mov="${res[0].id}"> <img data-mov="image data mov" src="https://image.tmdb.org/t/p/w500${res[0].poster_path}" class="img-fluid himg" alt="${res[0].title}" style="width:60px; height:70px"> <p class=" p-3"> ${res[0].title}</p> </a> </li>`); $("ul").on("click", "a", function (event) { let id = event.target.getAttribute("data-mov"); console.log(id); //$(this).find("a").attr("data-mov"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul></ul>

这就是它应该如何工作

 let res = [ { 'id': 1, 'poster_path': 234, 'title': 'anything' }, ] $('ul').append(`<li class="d-flex align-item-center movieId"> <a class=" d-flex w-100" data-mov="${res[0].id}"> <img data-mov="image data mov" src="https://image.tmdb.org/t/p/w500${res[0].poster_path}" class="img-fluid himg" alt="${res[0].title}" style="width:60px; height:70px"> <p class=" p-3"> ${res[0].title}</p> </a> </li>`); $("ul").on("click", "a", function (event) { let id = $(this).data('mov'); console.log(id); //$(this).find("a").attr("data-mov"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul></ul>