加载后Jquery效果消失
Jquery effect disappear after .load
我正在使用此脚本为我的内容添加一些效果(翻转效果和选项卡)
<script type="text/javascript" >
$('document').ready(function () {
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function () {
$(this).click(function () {
$('#flip-navigation li').each(function () {
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid = $(this).attr('id').substr(4);
$('#flip-container').quickFlipper({}, flipid, 1);
return false;
});
});
});
然而,在.load(加载页面)之后,效果会消失,我的选项卡的所有内容都会显示出来。
这是我用来加载内容的代码:
$(function () {
if (Modernizr.history) {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("nav").delegate("a", "click", function () {
_link = $(this).attr("href");
history.pushState(null, null, _link);
loadContent(_link);
return false;
});
function loadContent(href) {
$mainContent
.find("#guts")
.fadeOut(200, function () {
$mainContent.hide().load(href + " #guts", function () {
$mainContent.fadeIn(200, function () {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
console.log(href);
$("nav a[href$=" + href + "]").addClass("current");
});
});
}
$(window).bind('popstate', function () {
_link = location.pathname.replace(/^.*['''/]/, ''); //get filename only
loadContent(_link);
});
} // otherwise, history is not supported, so nothing fancy here.
});
有没有办法不否定它们?有些主题使用了on()函数,但我真的不知道如何在这里使用它。如果可能的话,我希望它能在不需要事先点击的情况下工作。
这是该网站的链接。只有页面Acceluil和Semaine Prochaine可以工作。快速翻转用于第二个。在Acceluil上也应该有一些效果(比如这里),但效果只适用于第一次加载。
以下是更新的解决方案:
function loadContent(href) {
$mainContent
.find("#guts")
.fadeOut(200, function () {
$mainContent.hide().load(href + " #guts", function () {
$.getScript('js/jquery.quickflip.min.js', function () {
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function () {
$(this).click(function () {
$('#flip-navigation li').each(function () {
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid = $(this).attr('id').substr(4);
$('#flip-container').quickFlipper({}, flipid, 1);
return false;
});
});
});
$.getScript('tablecloth/tablecloth.js', function () {
tablecloth();
});
$mainContent.fadeIn(200, function () {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
console.log(href);
$("nav a[href$=" + href + "]").addClass("current");
});
});
}
我认为您需要在执行load
的函数中添加代码,而不是在document.ready:
$('#result').load('ajax/test.html', function() {
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function () {
$(this).click(function () {
$('#flip-navigation li').each(function () {
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid = $(this).attr('id').substr(4);
$('#flip-container').quickFlipper({}, flipid, 1);
return false;
});
});
});
});
显然,线路$('#result').load('ajax/test.html', function()
需要修改以匹配您对load
的呼叫。
http://api.jquery.com/load/
原因是当您尝试连接quickFlip
时,#flip-container
不存在。在对load
的调用完成并检索到要在上使用quickFlip
的HTML之后,您必须调用$('#flip-container').quickFlip();
。
嘿,试试这个代码。。。
$( document ).ready(function() {
$('#flip-container').quickFlip();
$('#flip-navigation li a').each(function () {
$(this).on("click",function () {
$('#flip-navigation li').each(function () {
$(this).removeClass('selected');
});
$(this).parent().addClass('selected');
var flipid = $(this).attr('id').substr(4);
$('#flip-container').quickFlipper({}, flipid, 1);
return false;
});
});
});
我已经将click
事件更改为on
,如果您正在动态添加一些内容,它将对您有所帮助。
相关文章:
- Jquery UI对话框不会消失
- 灯箱没有't在jquery 1.9.0及以后的版本中消失
- jQuery Mobile:UI面板内容在Android 4.4.2上第二次消失
- "数据表”;jquery加载后CSS样式消失
- 元素在使用 jQuery 对相对包装宽度进行动画处理时消失
- Jquery/animate.css 侧边菜单在多次切换时消失
- Jquery 动画在单击几次后消失
- JQuery 和 frame(set) - 为什么它们会消失
- Jquery 将 x 移动到 y 并消失
- jQuery UI 可拖动克隆助手消失
- 为什么当我在 jQuery 中添加切换事件时我的按钮消失了
- jQuery悬停/隐藏/显示 - 当鼠标悬停在多个图像上时,并非所有文本都会正确消失
- jQuery滑入和滑出行为奇怪,按钮消失
- 使用 JS/jQuery 将行动态添加到表中时行消失
- 选择日期时间选择器在单击JQuery UI对话框时消失
- Jquery移动页面在使用css显示图像后消失
- 将鼠标悬停在下拉菜单上时,JQuery 悬停下拉菜单消失
- jQuery:使子菜单在一段时间后出现和消失
- jQuery设置的复选框和数字字段在一瞬间出现,然后突然消失
- 单击按钮时,文本消失(JQUERY)