Jquery load（）和ui-widget

Question

我使用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--> 

Answer 1

你可以只重新连接事件在complete回调load()功能：

$('#div').load('my.php', function(responseText, textStatus, XMLHttpRequest) { 
    $('#tabs').tabs(); 
}