clicking anchor element within jquery tab loads new page *outside* tab

Question

Hello,

I would like to be able to click on an achor element from a page inside a jQuery tab and have that new page load directly inside the original tab. I used sample code from the jQuery tutorial page but to no avail!

When I click on the anchor tag, I get redirected to www.google.com but lose my tabs. Does anyone know what I'm doing wrong? would really appreciate it. Thanks!

$(document).ready(function(){
    $("#tabs").tabs();
});
$('#tabs').tabs({
    load: function(e, ui) {
        $('a', ui.panel).click(function() {
            $(ui.panel).load(this.href);
            return false;
        });
    }
});

Answer 1

I'm guessing that #tabs is not present when that second statement is executed, and so the load event is never added.

Try this

$(document).ready(function(){
    $('#tabs').tabs({
        load: function(e, ui) {
            $('a', ui.panel).click(function() {
                $(ui.panel).load(this.href);
                return false;
            });
        }
    });
});