Các sự kiện tab jquery ui

Question

Tôi đang cố gắng gọi một hàm khi một tab được tải nhưng có vẻ như sự kiện không bao giờ xảy ra và tôi không thể hiểu được tôi đang làm gì sai.

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

Sử dụng Firebug Tôi chưa bao giờ thấy 'hello world'. Tôi mới đến jquery và tôi biết tôi phải mất một cái gì đó dễ dàng ở đây tôi chỉ không thể tìm ra những gì.

Answer 1

Cố gắng khởi tạo tabs sau khi liên kết với tabsload trình xử lý sự kiện. Hãy thử điều này

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

Answer 2

Tôi không có kinh nghiệm với jQuery UI Tabs nhưng tôi đã có một cái nhìn tại vấn đề của bạn và đây là những gì tôi thấy:

• Tabs sự kiện cụ thể được kích hoạt trên các yếu tố #tabs.
• Sự kiện tabsload được kích hoạt khi tab có url bên ngoài. Trong trường hợp đó nội dung được tải bằng AJAX và khi yêu cầu AJAX thành công thì sự kiện tabsload được kích hoạt.
• Trong trường hợp URL cục bộ hoặc được lưu trong bộ nhớ cache chỉ kích hoạt tabselect và tabshow sự kiện. Vì vậy, bạn nên sử dụng một trong những sự kiện đó.

Sửa tôi nếu tôi sai nhưng có vẻ như bạn muốn tải một số loại hình ảnh lớn khi tab được chọn. Trong ví dụ của bạn, img sẽ được tải ngay khi trang được tải. Nếu bạn muốn tải hình ảnh uể oải sau đó thử này:

$('#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 bạn có thể thử nghiệm với các sự kiện và thấy sự khác biệt.

Answer 3

Đó có thực sự là toàn bộ HTML của bạn không? Nếu vậy, bạn đang thiếu thẻ đóng trên #tabs div. Thẻ đóng ở cuối đoạn mã HTML của bạn sẽ đóng # div-visio div. HTML không hợp lệ (nếu nó thực sự là) có thể làm xáo trộn jquery.