Javascript 在 jsfiddle 中工作，但在我的页面上不起作用
我确实是一个 Javascript 初学者，刚刚开始使用 Jquery mobile。
我的问题是，我在 jsfiddle 中有一个工作示例，但是当我将其复制到我的页面时，它不再工作。 在 jsfiddle 中，只有当我在菜单中选择“onLoad”选项时，它才起作用。所以我想我把脚本放错了，或者我必须在页面加载时再次调用它。
我用 $(document).ready(function() { }); 和 $(function(){}); 包装了该函数，因为我读到这会启动站点加载后的脚本。
我必须在 Jquery Mobile 中使用方法来包装我的代码吗？或者我在 Javascript 基础知识上犯了错误？
多谢， 斯文
这是一个例子： http://jsfiddle.net/FtXWA/
这是页面：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascipt">
$(function(){
$("#slider").bind("change", function(event, ui) {
alert("test");
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<p>Page content goes here.</p>
<div data-role="fieldcontain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="255" />
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
I'm really a Javascript beginner and just started with Jquery mobile.
My problem is that I have a working example in jsfiddle but when I copy it to my page it is not working anymore.
In jsfiddle it is only working when I choose the "onLoad" option in the menu. So I guess I placed the script wrong or I have to call it again when the page is loaded.
I wrapped the function with $(document).ready(function() { }); and $(function(){}); because I read this would start the script when the site has been loaded.
Is there method I have to use in Jquery Mobile to wrap my code? Or do I make an error in Javascript basics?
Thanks a lot,
Sven
Here is the example:
http://jsfiddle.net/FtXWA/
And this is the page:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascipt">
$(function(){
$("#slider").bind("change", function(event, ui) {
alert("test");
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<p>Page content goes here.</p>
<div data-role="fieldcontain">
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="255" />
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
在 jQuery Mobile 中，您不应使用
$(document).ready()。尝试改为绑定 pagecreate：
当
#pageID完成加载并且已通过 jQuery Mobile 增强时，此函数将触发。In jQuery Mobile you shouldn't use
$(document).ready().Try to bind pagecreate instead:
This function will trigger when
#pageIDhas finnished loading and has been enhanced by jQuery Mobile.你的代码看起来没问题。可能会尝试注释掉函数包装器？
对此
You code looks ok. might try to comment out the function wrapper?
To this
Naning 是正确的，请参阅这篇文章了解更多详细信息
http://operationmobile.com/using-jquery-mobile-remember-to-use-pagecreate-instead-of-document-ready/
Naning is correct see this post for more details
http://operationmobile.com/using-jquery-mobile-remember-to-use-pagecreate-instead-of-document-ready/