JQuery移动演示代码与我的输出不匹配
JQuery移动演示代码与我的输出不匹配
提问于 2013-03-01 14:11:33
我正在尝试复制Flip Switch on jQuery Mobile的演示代码
<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>目标是这样的：
但我最终得到了这样的结果：
这让我抓狂，因为我知道我的JQuery移动脚本正在加载，但我似乎没有得到他们认为应该得到的结果。这基本上发生在大多数项目中，特别是处理表单和弹出窗口。我尝试了一些课程，等等，但都没有用。
你们对此有什么参考建议吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-03-01 15:07:08
现在我知道你的问题了，这不是你的问题，这是基本的问题，jquery只适用于dom中不在运行时的元素，这个问题也发生在我身上。可能有两种解决方案
尝试对包含新内容的元素调用.trigger("create")。
根据jQuery移动文档，“create事件适用于增强包含一个或多个小部件的原始标记。”
或者再次加载jquery.mobile。
Stack Overflow用户
发布于 2013-03-01 14:32:15
下面是完整的代码(在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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15151649
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号