javascript - 未在动态生成的元素上调用单击处理程序

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 框。

$('.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>

附加到dom后，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);            
});