Обработчик кликов не вызывается для динамически сгенерированного элемента

Question

После отправки формы (с использованием ajax) я пытаюсь затемнить ее и дать пользователю сообщение, а также ссылку, дающую пользователю возможность снова отобразить форму.

После отправки формы ....

$(form).animate({ opacity: 0.0}, 500, function(){
                $(this).fadeOut(400);

                $(".success-msg")
               .prepend('<h1> Success! You submitted a quote! </h1> <a class="quote-link" href="/quote-' + id + '"> localhost.com/quote-' + id + ' </a> <a class="goback" href="#"> Or click here to submit another quote </a>')
                    .fadeIn(500);

И если они захотят вернуться, они нажмут на .goback, что скроет .success-msg box.

$('.goback').click(function(){
                $(this).parent().fadeOut(500).hide().empty();
                $('#submit-quote').animate({opacity: 1}, 500).fadeIn(500);            
            });

Проблема в том, что если они нажмут ..

<a class="goback" href="#"> Or click here to submit another quote </a>

после добавления к домену событие click не работает. Но если я поставлю его в поле .success-msg по умолчанию и добавлю только другой HTML. Это сработает. Но затем, если они вернутся в форму и отправят другую кавычку, тогда .empty () удалит элемент, и .goback больше не будет существовать.

Как я могу сделать эту работу?

Answer 1

$(".success-msg").on('click','.goback',function(){
    $(this).parent().fadeOut(500).hide().empty();
    $('#submit-quote').animate({opacity: 1}, 500).fadeIn(500);            
});

или если вы не используете jQuery 1.7 или более позднюю версию ...

$(".success-msg").delegate('.goback','click',function(){
    $(this).parent().fadeOut(500).hide().empty();
    $('#submit-quote').animate({opacity: 1}, 500).fadeIn(500);            
});

Answer 2

Используйте delegate или on, потому что вы управляете динамически.

Использование делегата

    $(document).delegate('.goback', 'click',  function(){
        $(this).parent().fadeOut(500).hide().empty();
        $('#submit-quote').animate({opacity: 1}, 500).fadeIn(500);            
    });

Использование on, если вы используете jQuery 1.7 +

    $(document).on('click', '.goback', function(){
        $(this).parent().fadeOut(500).hide().empty();
        $('#submit-quote').animate({opacity: 1}, 500).fadeIn(500);            
    });

Answer 3

Обработчик назначается до того, как элемент существует. Попробуйте вместо этого использовать функцию live следующим образом:

$('.goback').live('click', function(){
      $(this).parent().fadeOut(500).hide().empty();
      $('#submit-quote').animate({opacity: 1}, 500).fadeIn(500);            
});

Это назначит обработчик onclick, когда элемент появится в DOM.