2

我的 jQuery Mobile 按钮出现问题，我不知道如何解决。

我正在尝试将单击事件绑定到它。在单击事件期间，我的当前页面应更改为另一个页面。

事件绑定在此按钮上：

<a id="test" data-role="button">Test</a>

使用这个 javascript 代码：

$(document).ready(function() {
    $('#test').on('click', function() {
        alert('Click!')
    });
});

这段代码一开始可以工作，但随着我的网站变得越来越大，它就停止了一起工作。

还有一个问题，因为这是我在这里的第一个问题，如何才能使它变得更好？从我过去浏览这个网站的经验来看，我发现了很多悬而未决的问题。

4

2 回答 2

2

这个答案会从jQuery Mobile的角度来写，不过大部分也可以用在其他群里。

免责声明

这是我个人博客中的一篇文章。

在场

首先也是最重要的，不要发布您的问题并消失。坚持至少半小时甚至一小时，等待评论（对您的问题）甚至更好的答案。通常，SO 成员会有更多问题，您应该尽快回答。不要把它看作是一件苦差事，你有一个问题，你应该努力寻找一个正确的答案。

如果没有人回答您的问题，请在白天返回几次。

代码示例

其次，您需要提供一个代码示例。越多越好，但不要过度。如果您要放置大型代码示例，请尝试注释所有内容。例如：“这是我的索引页面，我的问题发生在这里......”。并且因为这是一个致力于 jQuery Mobile（次要于 jQuery）的小组，所以也要注意放置您的 js 代码，让它比 HTML 代码具有更高的优先级。

例如，这是一个格式正确的问题：how to load an another html file on a button click in jquery mobile

我们需要的一切都在这里：

这个 js 代码示例涵盖了整个页面，我们可以使用它来创建一个工作示例。最好只为您指明正确的方向。

<script type="text/javascript">
    $(document).ready(function() {
        var userName;
        var userPassword;

        $("#submitBtn").click(function() {
            //alert("HI");      
            userName = $("#UserName").val();
            userPassword = $("#Password").val();

            if ((!UserName)|| (!userPassword)) {
                alert("Enter the Details");
            }
            else {
                if ((userName !="alpha") ||(userPassword !="beta")) {
                    alert('Enter correct username and password');
                }
                else {
                    //here i want to load my selectOption.html file ?
                }             
            }                                  
        });                          
    });
</script>

就像在顶级示例中一样，这足以让我们看到问题并为您创建一个工作示例。

<body>
    <div data-role="page" id="home">        
        <div data-role="header">            
            <h1>Enter Credential</h1>                      
        </div>

        <div data-role="content">
            <label for="UserName">User Name</label>
            <input type="text" name="UserName" id="UserName" value="" style="width:220px;"  />

            <label for="Password">Password</label>
            <input type="password" name="Password" id="Password" value="" style="width:220px;"  />

            <div id="submitBtn" data-role="button">Submit</div>
        </div> 
    </div>
</body>

实时代码示例

第三，如果您想更进一步，可以从您的代码中创建一个 jsFiddle 示例。jsFiddle 是一款出色的在线工具，您会发现很多 SO 成员都使用它来回答或提问。

官方页面：http: //jsfiddle.net/

通常问题可以在一个较小的 HTML 和 JS 示例中重新创建，因此使用它来创建一个有效的实时示例。您会惊讶于这将导致成功回答多少次。例如，这是我用来帮助其他 SO 成员的模板，它包含我需要给出快速正确答案和工作示例的一切：http: //jsfiddle.net/Gajotres/yWTG2/

另一个主要注意事项是，您的代码（HTML 或 js）必须格式正确。如果您有一个大型代码示例，您可以使用此工具自动使您的代码看起来很漂亮：http: //jsbeautifier.org/

你应该经常和明智地使用它。不要忘记您可以将它用于您自己的代码。

附加信息

不要忘记告诉我们您在项目中使用了哪些框架版本。这个非常重要。通常只需要一个 jQuery 和 jQuery Mobile 版本。，如果您使用其他框架，您也应该放置它们的版本。

如果您有时间并会查看我关于 jQuery Mobile 的其他答案/文章。根据我的经验，您 50% 的 jQuery Mobile 问题都可以在这里解决：

最后的想法

最后重要的事情。谦虚一点，没有人喜欢聪明人。不管你是多么聪明或优秀的开发人员。您在这里寻求帮助，所以请帮助我们帮助您。

编辑 ：

要回答您的问题，您的问题在文档就绪行中。它不能与 jQuery Mobile 一起使用，因为它通常会在 jQuery Mobile 页面初始化之前触发。如果页面未初始化，则您的按钮不能存在于 DOM 中。

要解决它，您应该使用正确的 jQuery Mobile 页面事件，如下所示：

$(document).on('pagebeforeshow', '#index', function(){      

});

其中 $index 是您页面的 id。

于 2013-03-23T10:54:21.373 回答
-1 
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Default functionality</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>

function fun()
{

var some = $("#some").val();

    if (some.match("3")) {
       alert("Hello");
    }
}

</script>
</head>
<body>
<select id="some">
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<button  id="btn" onclick='fun()' >Show</button>
</body>
</html>

嗨朋友，这可能会帮助你。谢谢 ：）

于 2013-03-23T10:49:07.337 回答