javascript - 通过Ajax加载Div时，有时点击不起作用

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 3 年前。

Improve this question

在收到ajax成功响应后，我将在html中附加div。例如:

<span class="slick-custom-arrow slick-prev" onclick="slickSlides(this);return false;"><svg width="30" height="37" viewBox="0 0 30 37" fill="none" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#pro-arrow-left"></use></svg></span>

这是点击功能:

function slickSlides(el){
    console.log("clicked");
}

我在这个跨度上添加了 5-10 个 div，这个函数随机运行，我的意思是如果单击第 4 个跨度，则单击不起作用，有时在第一个跨度上单击不起作用，有时它适用于所有跨度。更令人困惑的是第一次点击不起作用，第二次点击它起作用有人以前遇到过这个问题吗？

Answer 1

给已经存在的家长的事件。

$(document).on("click", ".slick-custom-arrow", function() {
   alert('clicked ',$(this).html())
 });
$.ajax({
  url: "http://dummy.restapiexample.com/api/v1/employees",
  cache: false,
  success: function(html){
    html.data.forEach(function(el,idx){
       if(idx<=10){
          let data='<br><span class="slick-custom-arrow" > '+(idx+1)+' Span </span>';
          $("#container").append(data);
       }
    })
    
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div id="container">
  <span class="slick-custom-arrow">0 Span</span>
</div>

$(document).on("click", ".slick-custom-arrow", function() {
   // Your code here
 });