Question

不知怎的，两个点击事件被混淆了

我在不同的<div id="tit_警报点击6次后会弹出6次但是比我在$("#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 not 删除您添加的上一个函数，但添加了新函数，以便您可以将多个函数绑定到例如.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);

点击混合。功能事件

1 个答案: