javascript - 追加后点击无法正常工作

Question

我的代码生成无限滚动，但当我触摸每个滚动时，它会多次出现警报，这是不对的。

$(window).scroll(function() {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {

    var variable = "<div class='corazon'>hi</div>";
    $(".hola").append(variable);
    $('.corazon').on('click', function() {
      alert("hola");
    });

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

谢谢。

Answer 1

$('.corazon').on('click', function() {
  alert("hola");
});

每次达到滚动限制时，您都会向所有具有“corazon”类的元素添加一个新的点击监听器。

您应该在创建的元素上添加点击监听器，而不是执行新的查询 $(".corazon") 。

试试这个:

var variable = $("<div class='corazon'>hi</div>");
$(".hola").append(variable);
variable.on('click', function() {
  alert("hola");
});