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”的所有元素添加一个新的Click侦听器。

您应该在创建的元素上添加点击侦听器，而不是执行新的查询$（“。corazon”）。

尝试一下：

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

Answer 2

这已经被问到了，请使用jquery clone来使用侦听器克隆现有元素。

.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

同时提供两者。

是的

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

不应在scoll侦听器中

完整文档：https://api.jquery.com/clone/

Answer 3

代替：

$('.corazon').on('click', function() {

您应该拥有：

$(variable ).on('click', function() {

现在，点击处理程序仅添加到新元素中。

附加后，点击无法正常工作

3 个答案: