Question

我真的是一个Javascript初学者，刚开始使用Jquery mobile。

我的问题是我在jsfiddle中有一个工作示例但是当我将它复制到我的页面时它不再起作用了。在jsfiddle中，它仅在我在菜单中选择“onLoad”选项时才起作用。所以我想我把脚本放错了，或者在页面加载时我必须再次调用它。

我用$(document).ready(function() { });和$(function(){});包装了该函数，因为我读到这将在加载网站时启动脚本。

我是否必须在Jquery Mobile中使用方法来包装我的代码？或者我在Javascript基础知识中出错了吗？

非常感谢，斯文

这是页面：

<!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>

Answer 1

在jQuery Mobile中，您不应使用$(document).ready()。

尝试绑定pagecreate：

$('#pageID').live('pagecreate', function(){ /*code*/ });

此功能将在#pageID加载完成后触发，并由jQuery Mobile增强。

Answer 2

你的代码看起来不错。可能会尝试注释掉函数包装器吗？

$(function(){
    $("#slider").bind("change", function(event, ui) {
        alert("test");
    });
});

到此

//$(function(){
    $("#slider").bind("change", function(event, ui) {
        alert("test");
    });
//});

Answer 3

Naning是正确的，请参阅此帖子了解更多详情

http://operationmobile.com/using-jquery-mobile-remember-to-use-pagecreate-instead-of-document-ready/

Javascript在jsfiddle中工作但在我的页面上不起作用

3 个答案: