时间戳

首页 > 解决方案 > 追加后单击无法正常工作

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

问题描述

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

$(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>

谢谢你。

标签： javascriptjquery

解决方案

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

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

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

试试这个：

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

推荐阅读