jQuery UI 选项卡事件

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，我从未看到“hello world”。我是jquery的新手，我知道我肯定缺少一些简单的东西，但我无法弄清楚是什么。

- user1106281

Answer 1

这真的是你的整个HTML吗？如果是这样，那么你在#tabs div上缺少一个闭合标签。你HTML片段末尾的闭合标签正在关闭#tabs-visio div。 无效的HTML（如果确实如此）可能会影响jquery。

- Jon

---

哇，我刚刚注意到这个问题已经超过一年了。希望你在此期间已经解决了它！ - Jon

Answer 2

尝试在绑定到tabsload事件处理程序后初始化tabs。 试试这个。

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

- ShankarSangoli

Answer 3

我对jQuery UI Tabs不是很熟悉，但我看了一下你的问题，这是我找到的：

• 选项卡特定事件在#tabs元素上触发。
• 当选项卡具有外部URL时，会触发tabsload事件。在这种情况下，使用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' }));
      }              
    }
});

这里 你可以尝试不同的事件并查看差异。

- kubetz