jqueryタブ - 現在のパネルで開いているリンクが機能しません。

Question

Jquery UIタブを使い始めました。タブのコンテンツは、最初は静的コンテンツで構成されています。

ここで、パネル内のコンテンツには、何らかのサブコンテンツへのリンクがあります。したがって、ユーザーがパネル内のリンクをクリックすると、現在のパネルのコンテンツをリンクからのコンテンツに置き換えたいと思います。

私はjquery UIタブのドキュメントから直接スクリプトを使用しましたが、動作させることはできません。パネル内ではなく、リンクを直接開いています。私はテストのために使用したコードは非常に簡単です：

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

       }); 
      } 
     }); 
    }); 

また、私は全く働いているパネル内には、リンクを呼び出していないAJAXを使用してロードされたパネルの内容を持っている場合。

私が間違っていることは何ですか？

ヘルプは本当に

よろしく

はMaik

EDIT1高く評価され：

[OK]を、私はさらに少しを得ました。私は、次のスニペットで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; 
     }); 
    } 

この変更の後、パネル上のすべてのリンクは、現在のパネルの内容を更新します。ここまでは順調ですね。まだ1つの問題が残っています。それ以降のリンクでは動作しません。私はajax呼び出しが終了したときにコールバックの2番目の "AddClickHandler"でそれをしようとしました。簡単なアラートを表示して別の機能を使用すると、パネルの内容が更新されたときに実際に呼び出されます。しかし、私はそのコンテンツの新しいリンクに何かを縛ることはできません。 "$（ 'a'、ui.panel）..."は機能しません。このための正しいセレクタは何でしょうか？

ヒント？

よろしく

右全く見doesntのは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> 

の通知、リンクは、タブ自体ではありませんタブの内容で

Edi t： 私はあなたの問題を見ていると思います。私はあなたのタブ内のそれらのリンクのオープンを登録するためのコードが表示されません。ユーザーがリンクをクリックすると、通常のリンクのようにブラウザのウィンドウ内に開きます。

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

EDIT2：私はちょうどあなたの「負荷」機能は、私は上記に書いた関数と同じことをしていることが実現

はこのような何かを試してみてください。とにかく、私の機能を試して、それがうまくいっているかどうか、もしあなたがファイヤーバグであなたの機能を踏んで、何が違うのかを見たら、それが...火かき棒であなたの機能を突き抜けて...またはオンラインデモを提供し、それ

EDIT3：ここ [OK]を、より良いソリューションです：

は、この機能を追加します。

おそらく

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 
} 

ない最善の解決策、それはすべての時間Aのすべてのリンクにクリック機能を再バインドしますので、リンクが開きます。しかし、次のように今、あなたには、いくつかの生産現場に

Answer 2

を構築している場合を除き、あなたが）（ライブに使用できるため、おそらくOK：

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