Jquery load() 和 ui-widget

Question

我正在使用 load() 来抓取 .php 页面的一部分并动态替换 div 中的内容。

索引页面上有一个 jquery-ui 选项卡小部件，在初始加载时可以正常工作。当我使用 load() 更改内容，然后返回到带有 ui-tabs 的原始主页(通过 AJAX)时，没有 onclick 功能(即，它们将我带到 #tabs-1 -片段而不是动态更新选项卡)。

我对此进行了一些研究，发现一旦通过 AJAX 销毁了一个部分，当它再次加载时，它就不会绑定(bind)到它的事件处理程序。建议的操作过程是附加“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

您可以在 load() 函数的 complete 回调中重新附加事件:

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