Смешанный клик.функциональное событие

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, во втором предупреждении фактически нужно использовать идентификатор, поэтому он находится в цикле

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_ divs немного чище, например:

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