Jquery load()和ui-widget

时间:2011-09-24 00:17:16

标签: jquery ajax load

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

1 个答案:

答案 0 :(得分:3)

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

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