Как сделать обработку события, добавленного элемента на страницу?

Question

[MaoCzedun]

Делаю дерево комментариев , есть класс magnific-pop-up (класс jQuery-плагинa magnific-popup), на него навешан слушатель на событие onclick. Так как я делаю дерево комментариев, то добавляю дочерний элемент с таким же классом. Вот тут выходит незадача, на дочернем элементе слушатель срабатывает только при перезагрузке страницы, что мне не надо, нужно, чтобы при добавлении на нем также был слушатель. Как это сделать?
Код слушателя:

$('.popup-with-form').click(function(){
             $('#toForm form').trigger('reset');
            var  dataParentId = $(this).attr('data-parent-id');
            if(typeof dataParentId == 'undefined')
            {
                dataParentId = 0;
            }
            $('#parentId').attr('value',dataParentId); 
            $('.popup-with-form').magnificPopup({
        		type: 'inline',
        		preloader: false,
            });
        });

Код вставки элемента:

function(data,textStatus,jQhr){
                    var  parseData = $.parseJSON(data);
                    var htmlToAppend = '<div class="reviews_row"><div class="reviews_name">'+parseData.record.surname+' '+parseData.record.username+'<span class="reviews_time">';
                    htmlToAppend +=parseData.record.date;
                    htmlToAppend +='</span></div>';
                    htmlToAppend +='<div class="reviews_text">';
                    htmlToAppend +=parseData.record.text;
                    htmlToAppend +='</div>';
                    htmlToAppend +='<a href="#toForm" data-parent-id="'+parseData.record.comments_id+'" class="popup-with-form"> <span class="respond">Ответить</span></a>'; 
                    htmlToAppend +='</div>';
                    $('#toForm .messageText').text('Ваш отзыв  добавлен');
                    var parentId = parseData.record.parentID;
                    if(parentId!=='0')
                    {
                        //  не соблюдается иерархия, перестроить селектор 
                        var $updateTree  = $('#forAddedComments a[data-parent-id="'+parentId+'"]');
                        var $subitemToUpdate =    $($updateTree).parents('.reviews_row').next('.subitem');
                        if(typeof  subitemToUpdate!=='undefined')
                        {
                            console.log('vetka 1');
                            $subitemToUpdate.append(htmlToAppend);
                        }
                        else
                        {
                            console.log('vetka 2');
                            $('<div class="subitem">'+htmlToAppend+'</div>').insertAfter($($updateTree).parents('.reviews_row'));
                        }
                        
                                                    
                    }
                    else
                    {
                        
                        $('#forAddedComments').append(htmlToAppend);
                        var addedSpan = $('#wrapMoreReviews').detach();
                        $('#forAddedComments').append(addedSpan);
                    }
                    window.setTimeout(
                    function(){
                        $.magnificPopup.close();
                       
                    },
                    4000);
                }

Answer 1

[Никита Борзенков]

$(document).on('click', '.popup-with-form', function(){

});

Answer 2

[MaoCzedun]

А почему тогда мой вариант с

$('.popup-with-form').click(function(){
}

Работает неккоректно ?

Comments

[Денис Инешин]

Ваш вариант предполагает наличие в DOM элемента с нужным классом. Если элемента еще нет, то и никакого слушателя привязано не будет. Вариант же Никита Борзенков - это классическое делегирование, когда событие привязано к документу и совершенно не зависит от наличия нужных элементов DOM.

[MaoCzedun]

Благодарю за объяснения , прийму к сведенею

[MaoCzedun]

Денис Инешин: а где я могу об этом более подробно почитать ?

[Денис Инешин]

MaoCzedun: гугл - javascript делегирование событий