Question

的演示代码

<form>
    <div data-role="fieldcontain">
        <label for="flip-7">Flip toggle switch:</label>
        <select name="flip-7" id="flip-7" data-role="slider" data-mini="true">
            <option value="off">Off</option>
            <option value="on">On</option>
        </select>
    </div>
</form>

针对这样的事情： Screen Capture

但我最终得到这样的东西： enter image description here

这让我抓狂，因为我知道我的JQuery Mobile脚本正在加载，但我似乎没有得到与他们认为应该相同的结果。这基本上适用于大多数项目，特别是处理表单和弹出窗口。我尝试上课等等，但没有用。

你们有任何参考建议吗？

Answer 1

现在我遇到了你的问题，它不是你的问题它的基本问题，jquery只适用于dom而不是运行时的元素这个问题也发生在我身上。可能有两种解决方案

尝试使用新内容调用元素.trigger("create")。

根据jQuery Mobile文档，“创建事件适用于增强包含一个或多个小部件的原始标记。”

或再次加载jquery.mobile。

Answer 2

以下是整个代码（在Google Chrome中测试）：确保您的浏览器启用了javascript。

<!DOCTYPE HTML>
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src='http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js'></script>
</head>
<body>
<form>
<div data-role="fieldcontain">
    <label for="flip-7">Flip toggle switch:</label>
    <select name="flip-7" id="flip-7" data-role="slider" data-mini="true">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
</div>
</form>
</body>
</HTML>

JQuery Mobile演示代码与我的输出不匹配

2 个答案: