jquery mobile和ui不兼容答案

【问题标题】：Incompatible jquery mobile and uijquery mobile和ui不兼容
【发布时间】：2013-01-29 08:27:59
【问题描述】：

虽然我有很多人提到类似的兼容性问题，但他们 50% 的问题在 StackOverflow 上得到了解决。我希望我的问题能达到 51-49 :)

考虑这段代码：

<html>
<head>
  <title>Hello, world!</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
</head>
<body>
  Hello
</body>
</html>

如果你在网页上加载它，你会在浏览器中间看到一个灰色的圆圈，并且不会显示“你好”这个词。在 Web 控制台上，您将看到以下内容：Uncaught TypeError: Object 0 has no method 'match' (Chrome) 或 TypeError: c.match is not a function (Firefox) 或 SCRIPT438：对象不支持属性或方法“匹配” (IE)。

想在一个页面上同时使用 jquery-ui 和 jquery-mobile 是个坏主意，还是我做错了什么？

【问题讨论】：

标签： jquery jquery-ui jquery-mobile compatibility

【解决方案1】：

唯一相关的是命令，在 jUI 之后加载 jQM，css 文件也是如此：

<!DOCTYPE html>
<html>
<head>
  <title>jQM Complex Demo</title>
  <meta name="viewport" content="width=device-width"/>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />    
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>    
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
    <div data-role="page" id="index">    
      Hello
    </div>
</body>
</html>

你还需要：

<!DOCTYPE html>

这将阻止 ajax 加载程序舞会显示：

<div data-role="page" id="index">    
    Hello
</div>

【讨论】：

+1 表示<!DOCTYPE html>。这太棒了 - 生活的简单技巧！ :)