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(); 
}