Question

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

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

事件受此限制：

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

使用此javascript代码：

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

此代码过去常常起作用，但随着我的网站变得越来越大，它只是停止了一起工作。

还有一个问题，因为这是我在这里的第一个问题，如何才能让它变得更好？根据我过去浏览本网站的经验，我发现了许多未解答的问题。

Answer 1

这个答案将从jQuery Mobile的角度编写，但大多数也可以在其他组中使用。

Disclamer

这是我个人博客的帖子。

存在

首先也是最重要的一点，不要发布你的问题并消失。坚持至少半小时甚至整整一小时，等待评论（对你的问题）甚至更好的答案。通常，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。

Answer 2

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

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

Jquery按钮单击事件绑定问题

2 个答案:

Disclamer

存在

代码示例

实时代码示例

其他信息

最后的想法