Javascript Ajax加载和以前的活动脚本
我调用一个加载函数,将内容加载到我的contentdiv中。 所有的工作,但我的问题是,这个div有时包含需要脚本才能运行的内容。 这里是MIXITUP 现在,我调用回调函数,即加载ajax后运行mixitup的函数,但当我多次加载内容时,mixitup似乎有点丢失,过滤器btn丢失了活动类 以下是我的文件AJAX.php的代码:Javascript Ajax加载和以前的活动脚本,javascript,jquery,ajax,Javascript,Jquery,Ajax,我调用一个加载函数,将内容加载到我的contentdiv中。 所有的工作,但我的问题是,这个div有时包含需要脚本才能运行的内容。 这里是MIXITUP 现在,我调用回调函数,即加载ajax后运行mixitup的函数,但当我多次加载内容时,mixitup似乎有点丢失,过滤器btn丢失了活动类 以下是我的文件AJAX.php的代码: $(function() { // historique $(window).bind('popstate', function() {
$(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
});
您可以使用$.ajax并使用成功处理程序,而不是.load
$.ajax({
url: url,
type: 'GET',
success:function(response){
// check response and
if(xyz){
mixItUp()
}else {
// else no mixin
}
}
})
在新的ajax调用之前,必须从内存中删除MixItUp实例,否则同一元素上的进一步实例化将被阻止。在进行ajax调用之前调用此函数
try {
$('.mixit').mixItUp('destroy');
}catch(x) {}
因此,我需要找到一种方法来始终检查我的内容,并在需要时运行脚本,或者在内容加载后只运行一次函数。使用find to target.mixit并将其传递到MixitNow函数将是一个好主意,还是不好?我也有同样的问题。你找到解决办法了吗?谢谢你谢谢你谢谢,我试过了,但是加载$'content'.ajax{url:url,或者$url类型:'GET',success:functionresponse{//check response和ifxyz{mixItUp}else{//else no mixin}}}如果我使用这个,当我点击链接时,问题是一样的,该函数似乎运行了两次。单击可以工作,但在另一次重新加载之后,混音是lostOk,所以我尝试在ajax加载之后重新加载mixitUp。从回调加载使用$.ajax,但这是相同的问题,当我单击链接时,函数似乎运行了两次。单击可以工作,但在另一次重新加载后,它将丢失