Ajax加载和以前的活动脚本

Question

我调用一个加载函数将内容加载到我的#contentdiv中。所有的工作，但我的问题是这个div有时包含的内容，需要一个脚本运行。(这里MIXITUP)

现在，我调用(回调函数)的函数谁在加载后运行mixitup (ajax)，但当我加载内容不止一次，mixitup似乎有点丢失，过滤器btn丢失的活动类。

下面是我的AJAX.php文件的代码:

$(function() {
    // historique
    $(window).bind('popstate', function() {
        console.log( "popstate event" );
        var url = window.location;
        var hash = url.href.substring(url.href.lastIndexOf('/') + 1);
        $('#content').load( url + ' #content');
    });
    // hide loading
    $('#loading').hide();
    // menu action link click
    $('.menu a').click(function(e) {
        e.preventDefault();
        $('#loading').slideDown(500);
        $("html, body").animate({ scrollTop: $('#loading').offset().top }, 20);
        $('.menu li').removeClass('active');
        $(this).parent().addClass('active');
        var lien = $(this).attr('href');
        $('#content').fadeOut(500, function() {
            $('#content').load( lien + ' #content> *', function () {    
                $('#content').fadeIn(500, function() {
                    $('#loading').slideUp();
                    history.pushState(null, null, lien);
                });
            }); 
        });
    });
});

这里是my.js

function mixitNow() {
    $('.mixit').mixItUp({
        load: {
            filter: 'all' 
        },
        controls: {
            toggleFilterButtons: false,
            toggleLogic: 'or',
            live: true,
        },
        callbacks: {
            onMixEnd: function(state) {
                $("body").getNiceScroll().resize();
            }
        }
    });
    $( "a.toggle" ).click(function() {
        $(".linkto a.toggle[data-target="+$(this).attr('data-target')+"]").toggleClass( "active" );
        // Trigger the NiceScroll to resize
        $("body").getNiceScroll().resize();
    });
    $('.navmenu').niceScroll({cursorcolor: "#84dbff", cursorborder: "none", cursorwidth: "4px", cursorborderradius: "0", scrollspeed: "100"});
    $("body").niceScroll({cursorcolor: "#22ABDE", cursorborder: "1px solid #fff", cursorborderradius: "0", scrollspeed: "100"});
};
$(document).ready(function() {
    mixitNow(); //works
    console.log( "doc ready call 2 mixit" );
});
$(document).ajaxSuccess(function() {
    console.log( "ajaxSuccess" );
    mixitNow(); //works
});

Answer 1

可以使用$来代替.load()。Ajax和使用成功处理程序

$.ajax({
    url: url,
    type: 'GET',
    success:function(response){
        // check response and 
        if(xyz){
            mixItUp()
        }else {
            // else no mixin
        }
    }
})

Answer 2

必须在新的ajax调用之前从内存中删除MixItUp的实例，否则对同一元素的进一步实例化将被阻塞。在ajax调用之前调用这个。

try {
        $('.mixit').mixItUp('destroy');
    }catch(x) {}