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:

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

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

Использование Firebug Я никогда не видел 'привет мир'. Я новичок в jquery, и я знаю, что мне не хватает чего-то легкого здесь, я просто не могу понять, что.

Answer 1

Попробуйте инициализировать tabs после привязки к tabsload обработчик события. Попробуйте

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

Answer 2

Я не испытывал с JQuery UI вкладки, но я должен был взглянуть на вашу проблему, и это то, что я нашел:

• Вкладки определенные события инициируются на #tabs элемента.
• Событие 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' })); 
     }    
    } 
}); 

HERE вы можете экспериментировать с событиями и увидеть различия.

Answer 3

Действительно ли это весь ваш HTML-код? Если это так, вам не хватает закрывающего тега в div #tabs. Закрывающий тег в конце вашего фрагмента HTML закрывает # tabs-visio div. Недопустимый HTML (если это действительно так) может расстроить jquery.