Jquery ui tabs events

Question

I try to call a function when the tab loads, but it seems that the event never fires, and I cannot understand what I'm doing wrong.

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

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

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

Using Firebug I never see the "hello world". I am new to jquery and I know that I am missing something easy here. I just can't understand that.

Answer 1

Try initializing tabsafter binding to the event handler tabsload. try it

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

Answer 2

I have no experience with jQuery UI tabs, but I looked at your problem and here is what I found:

• The element #tabstriggers special tab events.
• tabsload , url. AJAX AJAX , tabsload.
• URL- tabselect tabshow. .

, , , - . 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' }));
      }              
    }
});

, .

Answer 3

HTML-? , div #tabs. HTML # tabs-visio div. HTML ( ) jquery.