Question

I am using load() to grab a section of a .php page and replace content in a div dynamically.

The index page has a jquery-ui tab widget on it that works fine upon initial load. When I use load() to change out the content, and then go back to the original home page with the ui-tabs on it (via AJAX), there is no onclick functionality (ie. they take me to the #tabs-1-fragment instead of updating the tabs dynamically).

I have researched it a bit and have found that once a section is destroyed via AJAX, when it loads again it will not have the event handlers bound to it. The recommended course of action is to attach the “live()” handler instead of “bind()”, but since I am calling upon a Jquery UI widget, I can’t think of a way (besides editing the source code or building my own tabs) that I could do that.

I have been searching for a few hours but have no really found an answer to this question.

Am I missing something basic?

Here is the code used on the navigation links to call the page content:

$(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;

    });

})

It’s not pretty code (I am a beginner to javascript and jquery).

The tabs section is:

<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

You could just re-attach the events in the complete callback of the load() function:

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