javascript - jquery按钮点击事件绑定(bind)问题

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

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

事件绑定(bind)在这个按钮上:

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

使用此 javascript 代码:

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

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

还有一个问题，因为这是我的第一个问题，如何让它变得更好？根据我过去浏览此网站的经验，我发现了很多 Unresolved 问题。

最佳答案

这个答案会从jQuery Mobile的 Angular 来写，但是大部分也可以用在其他组。

免责声明

这是我个人博客的帖子。

存在感

首先也是最重要的，不要发布你的问题然后消失。坚持至少半小时甚至一小时，等待评论(针对您的问题)或更好的答案。通常，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。

关于javascript - jquery按钮点击事件绑定(bind)问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15585815/