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>

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

Answer 2

使用delegate或on，因为您正在动态操作。

使用委托

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

如果您使用的是jQuery 1.7 +

，则使用on

    $(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);            
});

当元素出现在DOM中时，这将分配onclick处理程序。

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

3 个答案: