Ajax 加载和以前的活动脚本答案

【问题标题】：Ajax loading and previous active scriptsAjax 加载和以前的活动脚本
【发布时间】：2014-05-05 12:53:05
【问题描述】：

我调用了一个加载函数来将内容加载到我的#content div 中。所有的工作，但我的问题是这个 div 有时包含需要脚本运行的内容。（这里是混合）

目前，我调用（回调函数）加载（ajax）后运行mixitup的函数，但是当我多次加载内容时，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);
                });
            }); 
        });
    });
});

这是我的.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
});

【问题讨论】：

所以我需要找到一种方法来始终检查我的内容并在需要时运行脚本，或者在内容加载后运行一次函数
使用 .find 来定位 .mixit 并将其传递给 MixitNow 函数是不是一个好主意？
我遇到了同样的问题。您找到解决方案了吗？谢谢

标签： javascript jquery ajax

【解决方案1】：

你可以使用 $.ajax 代替 .load() 并使用成功处理程序

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

})

【讨论】：

谢谢，我试过了，但加载不起作用 $('#content').ajax({ url: url, or $url type: 'GET', success:function(response){/ / 检查响应和 if(xyz){ mixItUp() }else { // else no mixin } } })
如果我使用这个，也是同样的问题，当我点击链接时，该功能似乎运行了两次。单击时有效，但在再次重新加载后 Mixit up 丢失
好的，所以我尝试加载 mixitUp，在 ajax 加载之后。从回调加载使用 $.ajax 但这是同样的问题，当我单击链接时，该函数似乎运行了两次。单击时有效，但在再次重新加载后 Mixit up 丢失

【解决方案2】：

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

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

【讨论】：