Ajax调用中初始化的MixItUp函数仅首次生效的问题求助

你的问题核心在于重复初始化MixItUp实例。MixItUp不允许在同一个DOM元素上多次调用mixItUp()方法——第一次初始化后，后续的初始化请求会被插件直接忽略，导致新通过Ajax加载的内容无法被插件识别，自然不会应用Masonry布局和动画效果。

虽然你尝试通过$('body').find('#masonrygallery')定位元素，但这并没有解决重复初始化的本质问题，因为目标元素已经绑定了MixItUp实例，插件会拒绝重复执行初始化逻辑。

有两种可靠的解决方式，你可以根据需求选择：

方式一：销毁旧实例后重新初始化 #

在每次初始化前，先检查目标元素是否已经存在MixItUp实例，如果有则销毁它，再重新初始化：

function searchphotos(force) { 
    // 修正选择器的转义错误：去掉多余的反斜杠
    var photoform = $(".photosearchform").serialize(); 
    $.ajax({ 
        type:'post', 
        url:"includes/photoresults.php", 
        data:({photoform: photoform}), 
        success:function(data){ 
            $("#searchphotos" ).show().empty().append( data ); 
        }, 
        complete:function(){ 
            var $gallery = $('#masonrygallery');
            // 通过插件自动添加的mixitup类判断是否已有实例
            if ($gallery.hasClass('mixitup')) {
                // 销毁旧实例
                $gallery.mixItUp('destroy');
            }
            // 重新初始化MixItUp
            $gallery.mixItUp({ 
                selectors: { 
                    target: '.tile', 
                    filter: '.filter', 
                    sort: '.sort-btn' 
                }, 
                animation: { 
                    animateResizeContainer: false, 
                    effects: 'fade scale' 
                } 
            }); 
        } 
    }); 
}

方式二：使用MixItUp的load方法更新内容（推荐） #

MixItUp提供了专门的load方法来动态更新内容，无需重复初始化实例，这是更符合插件设计的用法：

// 页面首次加载时只初始化一次MixItUp
$(document).ready(function() {
    $('#masonrygallery').mixItUp({ 
        selectors: { 
            target: '.tile', 
            filter: '.filter', 
            sort: '.sort-btn' 
        }, 
        animation: { 
            animateResizeContainer: false, 
            effects: 'fade scale' 
        } 
    });
});

function searchphotos(force) { 
    var photoform = $(".photosearchform").serialize(); 
    $.ajax({ 
        type:'post', 
        url:"includes/photoresults.php", 
        data:({photoform: photoform}), 
        success:function(data){ 
            $("#searchphotos").show();
            // 直接用MixItUp的load方法加载新内容，无需重新初始化
            $('#masonrygallery').mixItUp('load', data);
        }
    }); 
}

你代码里的$("\.photosearchform")存在不必要的转义，应该改为$(".photosearchform")——虽然这不是导致你问题的直接原因，但可能会在某些场景下引发选择器失效的问题，建议修正。

内容的提问来源于stack exchange，提问作者twan