Ajax调用后,Jquery函数不起作用

Question

我有这个功能:

$(document).ready(function() {
$('.post_button, .btn_favorite').click(function() {


//Fade in the Popup
$('.login_modal_message').fadeIn(500);

// Add the mask to body
$('body').append('<div class="overlay"></div>');
$('.overlay').fadeIn(300);  
return false;
});

我的页面用喜欢的按钮加载内容,但在Ajax调用并生成其他新内容后,当您单击新内容的按钮时,该功能不起作用.什么可能不对？

Answer 1

那是因为您正在使用动态内容.

您需要将单击调用更改为委托方法,例如 on

$('.post_button, .btn_favorite').on('click', function() {

要么

$("body").on( "click", ".post_button, .btn_favorite", function( event ) {

Answer 2

代替这个：

$('.post_button, .btn_favorite').click(function() {

做这个：

$(document).on('click','.post_button, .btn_favorite', function() {

on 将与当前元素和将来与选择器匹配的元素一起使用。

干杯