MIXed单击。函数事件

Question

不知何故，这两个点击事件被混淆了

在我点击6次后，不同的<div id="tit_警告将弹出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个项目。在这种情况下，您实际上是在向#Ex添加6个单击处理程序(即单击时6个警报)。使用.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);