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

问题描述：

表单提交后（使用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后，单击事件不起作用。但是，如果我默认将它放在.success-msg框中，并且只附加其他HTML。它会工作。但是，如果他们回到表单并提交另一个报价，那么.empty（）将清空元素，因此.goback不再存在。

我该如何做这项工作？

答

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

答

处理程序在元素存在之前被分配。尝试使用live功能，而不是像这样：

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

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

-1使用['.live（）']（http://jsperf.com/jquery-live-vs-delegate-vs-on）。 – PeeHaa 2012-01-15 19:01:30

哎呀，我已经弃用了。感谢您的有用评论... – Jivings 2012-01-15 20:58:42

不仅不赞成，而且比'.delegate（）'慢。 :-) – PeeHaa 2012-01-15 21:05:44

答

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

使用委托

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

使用上，如果你正在使用jQuery 1.7+

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

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

相关推荐