Jquery tab - open link in current panel not working

Question

I just started playing with jquery ui tabs. The content of the tabs consists mainly of static content at the beginning.

Now some of the contents inside the panels have links to some sub-content. Therefore, if the user clicks on the link in the panel, I would like to replace the contents of the current panel with the content coming from the link.

So, I used the script directly from the jQuery ui documentation, but I can't get it to work. It always opens the link directly, and not inside the panel. The code I'm using for testing is pretty simple:

<div id="MyTabs">
    <ul>
        <li><a href="#TestTab1">TestTab</a></li>
        <li><a href="#TestTab2">TestTab</a></li>
    </ul>
    <div id="TestTab1">
        Lorem ipsum dolor. dumm di dumm
        <a href="http://mywebserver/somelink">Test</a>
    </div>
    <div id="TestTab2">
        Lorem ipsum dolor. dumm di dumm 2
        <a href="http://mywebserver/somelink2">Test 2</a>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#MyTabs').tabs({
            load: function(event, ui) {
                $('a', ui.panel).click(function() {
                    $(ui.panel).load(this.href);
                    return false;

                });
            }
        });
    });

Also, if I have the contents of a panel loaded using an AJAX call, no link inside the panel works.

Any idea what I'm doing wrong?

Help is really appreciated

Maik

Edit1:

, . Javascript :

        $(function() {
        $("#MyTabs").tabs();
        $("#MyTabs").bind('tabsshow', function(event, ui) {
            AddClickHandler(ui);
        });
    });

    function AddClickHandler(ui) {
        $('a', ui.panel).click(function() {
            MyAlert("AddClickHandler");
            $(ui.panel).load(this.href, AddClickHandler(ui));
            return false;
        });
    }

. . . . "AddClickHandler" , ajax . , , . . "$ ('A', ui.panel)..." . ?

?

Maik

Answer 1

.

:

<div id="example">
     <ul>
         <li><a href="ahah_1.html"><span>Content 1</span></a></li>
         <li><a href="ahah_2.html"><span>Content 2</span></a></li>
         <li><a href="ahah_3.html"><span>Content 3</span></a></li>
     </ul>
</div>

TAB,

Edit: , , . , - . , , , .. .

- :

$("#MyTabs").find("a").click(function(){
   $(this).parent(".ui-tabs-panel").load(this.href);
   return false;
});

Edit2: , "" , . , , , firebug , -, ... firebug.. -,

Edit3: , :

:

var bindAjaxLinks = function(){
    $("#MyTabs").find("a").click(function(){
         $(this).parent(".ui-tabs-panel").load(this.href, {}, bindAjaxLinks);
         return false;
    });
}

//in the tabs constructor add the select function:

$("#MyTabs").tabs({select: function(event, ui) {
   bindAjaxLinks();
  },
  //your other stuff
 }

, , . , , , -

Answer 2

live() :

$("#myTabs").tabs({
        load: function(event, ui) {
         $("#myTabs").find("a").live('click', function() {
        $(ui.panel).load(this.href);
        return false;
    });
}})