jquery ui tabs events

Question

タブが読み込まれたときに関数を呼び出そうとしていますが、イベントが発生しないように見えますが、何が間違っているのか分かりません。

<div id="tabs" style="padding-top:0px;margin-top:0px"> 
    <ul> 
    <li><a href="#tabs-scripting">Scripting</a></li> 
    <li><a href="#tabs-scripting-history">Scripting History</a></li> 
    <li><a href="#tabs-equipment">Equipment List</a></li> 
    <li><a href="#tabs-syslogs">Syslogs</a></li> 
    <li><a href="#tabs-visio">Visio</a></li> 
    <li><a href="#tabs-misc">Misc</a></li> 
    </ul> 

    <div id="tabs-visio"> 
    <img id="visio_topology" src="/Scripting/customer/7229_topology.png"> 
    <!-- Visio Tab div end --> 
    </div> 

JS：Firebugのを使用して

$('#tabs').tabs({ 
    select: function(event, ui) { 
     window.location.hash = ui.tab.hash; 
    } 
    }); 

    $("#tabs-visio").tabs().bind("tabsload", function(event, ui) { 
    console.log('hello world'); 
    }); 

私は 'こんにちは世界' を見ることはありません。私はjqueryを初めて使っています。私はここで簡単に何かを見逃していなければならないことを知っています。

Answer 1

イベントハンドラtabsloadへのバインド後にtabsを初期化してください。私はjQueryのUIのタブを経験していないよ、この

$("#tabs-visio").bind("tabsload", function(event, ui) { 
    console.log('hello world'); 
    }).tabs(); 

Answer 2

を試してみてください、私はあなたの問題を見ていたし、これは私が見つけたものです：

• タブ特定のイベントが#tabs要素でトリガされます。
• イベントにtabsloadが発生します。このタブには外部URLがあります。その場合、コンテンツはAJAXを使用してロードされ、AJAXリクエストが成功するとイベントがトリガされます。
• ローカルまたはキャッシュされたURLの場合は、tabselectとtabshowイベントのみがトリガーされます。したがって、これらのイベントの1つを使用する必要があります。

私が間違っている場合は私を修正しますが、タブが選択されているときに大きな画像をロードしたいようです。あなたの例では、ページがロードされたときにimgがロードされます。あなたはなまけイメージをロードしたい場合は、この方法を試してください。

$('#tabs').tabs({ 
    select: function(event, ui) { 
     // if "Visio" tab is selected and the image is not in DOM ... 
     if(ui.index === 4 && $("#visio-topology").length === 0) { 
     // ... append it to the div 
     $("#tabs-visio").append($("<img>", { 
      id: 'visio-topology', 
      src: '/Scripting/customer/7229_topology.png' })); 
     }    
    } 
}); 

HEREあなたはイベントで実験との違いを見ることができます。

Answer 3

本当にあなたのHTML全体ですか？その場合は、＃タブdivに終了タグがありません。 HTMLスニペットの最後にある閉じタグは、＃tabs-visio divを閉じています。 無効なHTML（本当にあれば）がjqueryを動揺させる可能性があります。