混合點擊。功能事件

Question

莫名其妙兩個點擊混合事件多達

後，我在不同的<div id="tit_警報點擊6次，會彈出6倍，但 比當我點擊1次上$("#EX") - 的EX DIV的警報會彈出6倍！而且不僅有一個 這兩個事件混在一起... 爲什麼？如何解決？

function Cream(Cresults) { 
      var div = $('<div/>'); 
      $.each(Cresults, function() { 
       $('<div id="tit_' + this.Cream_Id + '">' + this.Cream_Id 
       +'</div>').click(function() { 
               alert("you clicked on the first div"); 
               }).appendTo(div); 
               $('<br/>').appendTo(div); 


$("#EX").click(function() { 
alert("that is the second div"); 
          }); 

               });    

$("#Grid").html(div); 
$("#Grid").append(div); 
} 

     <div id="EX">X</div> 

循環打印DIV每個霜 - 如果有200個藥膏會有200點的div：tit_1 ... tit_200第二警報實際需要使用的ID，以便爲它在循環的原因

Answer 1

看來你暗示Cresults包含6個項目。在這種情況下，您確實添加了6個點擊處理程序（即單擊時發出6個警報）至#Ex。使用.click確實不是刪除您添加的上一個功能，但添加了新功能，以便您可以將幾個功能綁定到.click。你會看到這個更清楚，如果你縮進更好一點：

function Cream(Cresults) { 
    var div = $('<div/>'); 

    $.each(Cresults, function() { 
     $('<div>').attr("id", "tit_" + this.Cream_Id) 
        .text(this.Cream_Id) 
        .click(function() { 
      alert("you clicked on the first div"); 
     }).appendTo(div); 

     $('<br/>').appendTo(div); 

     $("#EX").click(function() { // apparent inside the loop, so added 6 times 
      alert("that is the second div") 
     }); 

    });    

    $("#Grid").empty().append(div); 
} 

你應該移動.click外循環，使之只提醒一次。

我改變了一些其他的事情：設置.html和追加沒有多大意義。你可能想先清空#Grid這樣的：

$("#Grid").empty().append(div); 

，你可以寫的#tit_的div乾淨了一點，如：

$('<div>').attr("id", "tit_" + this.Cream_Id) 
      .text(this.Cream_Id) 
      .click(function() { 
    alert("you clicked on the first div"); 
}).appendTo(div);