为什么我的小提琴呈现不同于我的测试 html 页面？ [复制]答案

【问题标题】：why does my fiddle render differently than my test html page? [duplicate]为什么我的小提琴呈现不同于我的测试 html 页面？ [复制]
【发布时间】：2015-03-03 14:55:25
【问题描述】：

我找到了一个具有我想要的功能的小提琴 (http://jsfiddle.net/R5sSh/)，但我无法让它在具有较新 jquery 2.X 和 jquery mobile 1.4.X 的测试页面上工作。

我的小提琴：http://jsfiddle.net/skfneasfbif/m11v6tef/

我的示例页面，由我的小提琴创建：

<html>
<head>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {

      $("#tabs").tabs({
          select: function(event, ui) { console.log("Tab selected"); }
      });
      $("#tabs-1 > #subtabs").tabs({
          select: function(event, ui) { console.log("subTab selected"); }
      });

  });
  </script>
</head>
<body>
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Tab1</a></li>
      <li><a href="#tabs-2">Tab2</a></li>
    </ul>
    <div id="tabs-1">
      <p>Console.log shows 1 message : "Tab selected"</p>
      <div id="subtabs">
        <ul>
          <li><a href="#subtabs-1">Subtab1</a></li>
          <li><a href="#subtabs-2">Subtab2</a></li>
        </ul>
        <div id="subtabs-1">
          <p>Console.log shows 2 messages : "Subtab selected" & "Tab selected". I just want the Subtab selected.</p>
        </div>
        <div id="subtabs-2">
          <p>Console.log shows 2 messages : "Subtab selected" & "Tab selected". I just want the Subtab selected.</p>
        </div>
      </div>
    </div>
    <div id="tabs-2">
      <p>Console.log shows 1 message : "Tab selected"</p>
    </div>
  </div>
</body>
</html>

在没有标签的情况下呈现，只包含文本，点击链接时不做任何事情。

我的测试页有什么问题？是否有调试器可以显示我的错误？

编辑：我已经更新了 javascript，但它仍然无法正确呈现。我的评论中有一个测试页。

【问题讨论】：

标签： javascript jquery html jsfiddle

【解决方案1】：

您需要将以下内容包含在jQuery DOM ready event handler function 中，因为调用此代码时相应的 HTML 还不存在...

$("#tabs").tabs({
  select: function(event, ui) { console.log("Tab selected"); }
});
$("#tabs-1 > #subtabs").tabs({
  select: function(event, ui) { console.log("subTab selected"); }
});

应该是……

$(document).ready(function() {

    $("#tabs").tabs({
        select: function(event, ui) { console.log("Tab selected"); }
    });
    $("#tabs-1 > #subtabs").tabs({
        select: function(event, ui) { console.log("subTab selected"); }
    });

});

它只在您的 jsFiddle 中有效，因为 jsFiddle 自动将您的 JavaScript 包装在其后端的 DOM 就绪事件处理函数中。

【讨论】：

我添加了更改（准备好的函数包装和缩进），但它仍然无法正确呈现。我在这里设置了一个测试页面：link.
@nk，您必须包含与 jsFiddle 中相同的所有外部资源，如果您希望您的页面能够正常工作。换句话说，您的测试页面缺少 jQuery UI 插件及其 CSS。
jsFiddle 页面的组织方式，看起来像是在加载（jquery 1.x 和 jquery ui）或（jquery 2.x 和 jquery mobile）。但是，是的，这解决了它，谢谢！