Простой, но странный HTML, проблема jQuery. Циклы функций без причины

Question

Я написал код в javascript (jQuery), который позволяет пользователю с каждым нажатием кнопки создавать «окно» на веб-сайте и получать предупреждающее сообщение после этого щелчка.

Он работает следующим образом: 1) Когда пользователь нажимает кнопку «Добавить (#addBox)» - jQuery добавляет новую строку в HTML-файл, который создает «окно» (это выглядит как окно из-за код CSS). 2) Если пользователь нажимает на это поле, он отправляет предупреждающее сообщение «Hello».

Но если я добавлю несколько ящиков, а затем нажмите на первый, вместо отправки одного сообщения оповещения, он отправит его столько раз, сколько будет создано количество ящиков.

Пример: 1) У меня есть 1 коробка. Нажав на него, я получаю 1 предупреждающее сообщение. 2) У меня есть 2 коробки. Нажав на верхнюю, я получаю 2 предупреждающих сообщения. Нажав на второй, я получаю 1 сообщение. 3) У меня есть 3 коробки. Нажав на верхнюю, я получаю 3 сообщения оповещения. Нажав на второй, я получаю 2 сообщения. Нажав на третий, я получаю 1 сообщение.

Функция отправки предупреждающего сообщения по какой-либо причине является циклическим. Так вот код:

function addBox() 
{ 
    $("#addBox").on("click", function() { 
     $("#addBox").append('<div class="desiredBox">Say Hello</div>'); 
     } 

     boxCount(); 
    }); 
} 

function boxCount() 
{ 
    $(".desiredBox").on("click", function() { 
     alert("Hello"); 
    }); 
} 

Любые идеи, как сделать их отправить только одно сообщение каждому, предотвращающий функцию «boxCount()» из цикла?

Answer 1

Каждый раз, когда функция boxCount вызывается обработчик события добавляются к существующим элементам т.е. ".desiredBox". таким образом, вы получаете несколько предупреждений.

Как вы создаете элементы динамически.

Вам необходимо использовать Event Delegation. Вы должны использовать .on(), используя подход с делегированными событиями.

Общий синтаксис

$(document).on(event, selector, eventHandler); 

В идеале вы должны заменить document с ближайшим статическим контейнером.

Полный код

$("#addBox").on("click", function() { 
    $("#addBox").append('<div class="desiredBox">Say Hello</div>');   
}); 
$(document).on('click', '.desiredBox', function(){ 
    //Your code 
}); 

Answer 2

Используйте событие делегации, чтобы не держать добавления click события .desiredBox снова и снова:

$(document).on("click", "#addBox", function() { 
    $("#addBox").append('<div class="desiredBox">Say Hello</div>'); 
    $(".desiredBox").trigger("click"); 
}); 


$(document).on("click", ".desiredBox", function() { 
    alert("Hello"); 
});