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

【问题标题】：how to get the value of element that created dynamically如何获取动态创建的元素的值
【发布时间】：2021-04-21 15:25:07
【问题描述】：

我正在处理 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 有什么解决方案？

【问题讨论】：

“a”在您的点击中有何作用？
你能做一个小提琴吗？
let id = $(this).data("mov");
使用event.currentTarget 获取监听器所附加的元素。

标签： javascript html jquery ecmascript-6

【解决方案1】：

当使用event.target 时，它会选择你点击的元素而不是a，而img 和p 没有data-mov 它会输出 null 或 undefined .. 所以你需要改用let id = $(this).data("mov"); .. 无需使用.find('a')，因为$(this) 将为您选择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>

【讨论】：

目前尚不清楚event.currentTarget 如何与 jQuery 的委托侦听器一起工作这一事实是一劳永逸地停止使用 jQuery 的另一个原因。

【解决方案2】：

原版 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>

【讨论】：