我使用load()来抓取.php页面的一部分并动态替换div中的内容。
索引页面上有一个jquery-ui选项卡小部件,可以在初始加载时正常工作。当我使用load()来更改内容,然后返回到原始主页上的ui-tabs(通过AJAX)时,没有onclick功能(即他们带我到#tabs-1 -fragment而不是动态更新标签)。
我对它进行了一些研究,发现一旦某个部分被AJAX销毁,当它再次加载时,就不会有事件处理程序绑定它。推荐的做法是附加“live()”处理程序而不是“bind()”,但由于我正在调用Jquery UI小部件,我想不出办法(除了编辑源代码或构建)我自己的标签,我可以做到这一点。
我一直在寻找几个小时,但没有真正找到这个问题的答案。
我错过了一些基本的东西吗?
以下是导航链接上用于调用页面内容的代码:
$(document).ready(function(){
$('#studioNav').click(function() {
$('#mainContent').animate({opacity:0}, 1000, function(){
$('#mainContent').load('studio.php #studio');
});
$('#mainContent').animate({opacity:1}, 1000);
$('#nav li').removeClass('current');
$(this).addClass("current");
return false;
});
$('#contactNav').click(function() {
$('#mainContent').animate({opacity:0}, 1000, function(){
$('#mainContent').load('contact.php #contact');
});
$('#mainContent').animate({opacity:1}, 1000);
$('#nav li').removeClass('current');
$(this).addClass("current");
return false;
});
$('#calendarNav').click(function() {
$('#mainContent').animate({opacity:0}, 1000, function(){
$('#mainContent').load('calendar.php #calendar');
});
$('#mainContent').animate({opacity:1}, 1000);
$('#nav li').removeClass('current');
$(this).addClass("current");
return false;
});
$('#homeNav').click(function() {
$('#mainContent').animate({opacity:0}, 1000, function(){
$('#mainContent').load('index.php #featured');
});
$('#mainContent').animate({opacity:1}, 1000);
$('#nav li').removeClass('current');
$(this).addClass("current");
return false;
});
})
这不是漂亮的代码(我是javascript和jquery的初学者)。
标签部分是:
<div id="mainContent">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1">
<a href="#fragment-1"><span>Friday, August 26th</span>Digit Dealer EP Release w/ Lionshare, Wolf Couture, Sludgehammer</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-2">
<a href="#fragment-2"><span>Friday, August 26th</span>Digit Dealer EP Release w/ Lionshare, Wolf Couture, Sludgehammer</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-3">
<a href="#fragment-3"><span>Friday, August 26th</span>Digit Dealer EP Release w/ Lionshare, Wolf Couture, Sludgehammer</a>
</li>
<li class="ui-tabs-nav-item" id="nav-fragment-4">
<a href="#fragment-4"><span>Friday, August 26th</span>Digit Dealer EP Release w/ Lionshare, Wolf Couture, Sludgehammer</a>
</li>
</ul>
<!-- First Content ---------------->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img class="featured_img" src="http://placehold.it/315x275" alt="Balls" />
<ul class="featured_meta">
<li><a href=" ">Link to their music in the archives</a></li>
<li><a href="http://blogspot.sheastadium.com/ ">Link to full blog Post</a></li>
</ul>
<div class="socialMedia">
<div class="facebook">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="120" show_faces="false" action="like" font=""></fb:like>
</div>
<div class="twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</div>
<div class="info" >
<h2>Friday, August 26th</h2>
<p>Digit Dealer EP Release w/ Lionshare, Wolf Couture, Sludgehammer, Glowing Pains & Tape Recorder</p>
<h3>Doors at 8pm</h3>
<h3>Cover: $8</h3>
</div><!--END INFO-->
</div><!--END FRAG 1-->
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img class="featured_img" src="http://placehold.it/315x275" alt="" />
<ul class="featured_meta">
<li><a>Link to their music in the archives</a></li>
<li><a>Link to full blog Post</a></li>
</ul>
<div class="socialMedia">
<div class="facebook">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="120" show_faces="false" action="like" font=""></fb:like>
</div>
<div class="twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</div>
<div class="info" >
<h2>Friday, August 26th</h2>
<p>Digit Dealer EP Release w/ Lionshare, Wolf Couture, Sludgehammer, Glowing Pains & Tape Recorder</p>
<h3>Doors at 8pm</h3>
<h3>Cover: $8</h3>
</div><!--END INFO-->
</div><!--End second fragment-->
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img class="featured_img" src="http://placehold.it/315x275" alt="" />
<ul class="featured_meta">
<li><a>Link to their music in the archives</a></li>
<li><a>Link to full blog Post</a></li>
</ul>
<div class="socialMedia">
<div class="facebook">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="120" show_faces="false" action="like" font=""></fb:like>
</div>
<div class="twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</div>
<div class="info" >
<h2>Friday, August 26th</h2>
<p>Digit Dealer EP Release w/ Lionshare, Wolf Couture, Sludgehammer, Glowing Pains & Tape Recorder</p>
<h3>Doors at 8pm</h3>
<h3>Cover: $8</h3>
</div><!--END INFO-->
</div><!--End third fragment-->
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img class="featured_img" src="http://placehold.it/315x275" alt="" />
<ul class="featured_meta">
<li><a>Link to their music in the archives</a></li>
<li><a>Link to full blog Post</a></li>
</ul>
<div class="socialMedia">
<div class="facebook">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="120" show_faces="false" action="like" font=""></fb:like>
</div>
<div class="twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</div>
<div class="info" >
<h2>Friday, August 26th</h2>
<p>Digit Dealer EP Release w/ Lionshare, Wolf Couture, Sludgehammer, Glowing Pains & Tape Recorder</p>
<h3>Doors at 8pm</h3>
<h3>Cover: $8</h3>
</div><!--END INFO-->
</div><!--End fragment 4-->
</div><!--End slider-->
</div><!--End Main Content-->
答案 0 :(得分:3)
您可以在complete
函数的load()
回调中重新附加事件:
$('#div').load('my.php', function(responseText, textStatus, XMLHttpRequest) {
$('#tabs').tabs();
}