Слишком много раз срабатывает триггер событий - JQuery

Question

У меня есть специальный pb: я создаю на лету ajax-запрос некоторых списков и divs класса 'myclass', затем нажимаю на них, я называю это, который добавляет некоторый url в область ввода, а затем добавляет источник к IFRAME, отображение во всплывающем окне

$(document).on("click", "li .myclass", function() { 
    var uri = $(this).closest('li').attr("id"); 
    var embed = 'https://www.youtube.com/embed/'; 
    $('#myinput').val(val + uri); 
    $('#wrapper iframe').attr('src', embed + uri); 
}); 

затем по клику на кнопку всплывающее окно, я вызвать щелчок на #mybutton, которые создают некоторый текст-зону

$(document).on("click", ".popup button", function() { 
    event.preventDefault(); 
    $('#mybutton').trigger('click'); 
    $('#myinput').val(''); 
}); 

Моя проблема в том, что в первый раз я нажимаю «li». myclass 'он создает чисто одну текстовую зону. Но если я нажму второй раз, он создаст три текстовые зоны, затем, если я нажму третий раз, он создаст 6 текстовых зон. Я действительно не понимаю этого брежа, может ли кто-нибудь помочь?

Answer 1

Попробуйте заменить это:

$(document).on("click", "li .myclass", function() { 

С этим:

$("li .myclass").on("click", function() { 

Путь вы используете on метод JQuery с 'селектор' парам немного опасно. Это требует понимания Event Bubbling и является вероятным источником запуска нескольких событий.

Answer 2

Мы должны остановитьPropagation() Чтобы избежать щелчков триггеров события слишком много раз.

$(this).find('#cameraImageView').on('click', function(evt) { 
evt.stopPropagation(); 
console.log("Camera click event."); 
});