附加后，點擊無法正常工作

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

現在，單擊處理程序僅添加到新元素。