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

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");
});

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() {

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