Javascript jquerybind可以工作，但ON不能

我已经编辑了我的原始代码示例，以包含我应该使用的“正确方法”

我正在处理一个jquery移动项目，我注意到如果我使用on绑定一个click，它将在第一次加载页面时起作用，但是如果我返回页面，那么每次返回时我都会得到另一个绑定。如果我使用BIND，那么无论我离开页面多少次并返回，我只会得到一个

我可以使用BIND，但我知道它将在将来消失，所以我想知道为什么ON不起作用？

我正在使用jquery 1.9.1和jquery mobile 1.3.1

此代码位于每页的标题部分：

 <link rel="stylesheet" href="resources/js/jquery.mobile-1.3.1.min.css" />
 <script src="resources/js/jquery-1.9.1.min.js"></script>
 <script type="text/javascript">
    console.log('head javascript - before JQM is loaded');


    // EDITED: Don't put JQM events inside .ready()
    //$(function() {


            // *** EDITED - THIS IS CORRECT WAY TO USE .on() IN THIS CASE ****
            $(document).on("pageinit", "#page_login", function() {
                console.log('#page_login page - pageinit event -- (only once for THIS page)');
                $('#loginformSubmit').on('click', login_form_click_handler);
            });


            // *** THIS ONE WORKS ****
            $(document).on("pageinit", "#page_login", function() {
                console.log('#page_login page - pageinit event -- (only once for THIS page)');
                $('#loginformSubmit').bind('click', login_form_click_handler);
            });



           // *** BUT, if I replace the section above with this
           //          then the login_form_click_handler() function
           //          will get executed N+1 times, where N = number
           //          of times I have viewed the page. 

           $(document).on("pageinit", "#page_login", function() {
                console.log('#page_login page - pageinit event -- (only once for THIS page)');               
                /* EDITED NOTE:  This doesn't work correctly because JQM maintains
                                 a single 'document'  so each time this event is 
                                 fired (initial browse and subsequent visits if 
                                 page is not in jqm cache) I was binding another
                                 click event to the document which already had one
                                 (or more) of the same.  */
                $(document).on('click', '#loginformSubmit', function(e){                 
                     login_form_click_handler(e);
                });
           });


    //});


    <script src="resources/js/jquery.mobile-1.3.1.min.js"></script>

log（'headjavascript-加载JQM之前'）；
//已编辑：不要将JQM事件放入.ready（）中
//$（函数（）{
//***已编辑-在本例中，这是使用.on（）的正确方法****
$（document）.on（“pageinit”，“page#u login”，function（））{
log（“#page_login page-pageinit事件--（此页面仅一次）”；
$（'loginformSubmit'）。在（'click'，login\u form\u click\u handler）上；
});
//***这个有效****
$（document）.on（“pageinit”，“page#u login”，function（））{
log（“#page_login page-pageinit事件--（此页面仅一次）”；
$（'loginformSubmit'）.bind（'click'，login\u form\u click\u handler）；
});
//***但是，如果我将上述部分替换为
//然后登录表单单击处理程序（）函数
//将执行N+1次，其中N=number
//我已经看了很多次了。
$（document）.on（“pageinit”，“page#u login”，function（））{
log（“#page_login page-pageinit事件--（此页面仅一次）”；
/*编辑说明：由于JQM维护
单个“文档”，因此每次事件
激发（初始浏览和后续访问，如果需要）
页面不在jqm缓存中）我正在绑定另一个页面
单击事件，将其添加到已有事件的文档
（或更多）相同的*/
$（文档）。在（'click'，'#loginformSubmit'，函数（e）{
登录表单点击处理程序（e）；
});
});
//});

这是登录页面的正文部分

<div data-role="page" id="page_login" data-theme="b" data-content-theme="b">


<div data-role="header">
    <h1>AV Login</h1>
    <a href="resources/dialogs/login_help.htm" data-icon="info" data-iconpos="right" data-theme="b" data-rel="dialog" class="ui-btn-right">Help</a>
</div>

<div data-role="content">

<form id='loginform' class="validate" action="resources/processors/login.php" method="post">

<div data-role="popup" id="invalid_login" data-transition="pop" class="ui-content" data-theme="e" data-overlay-theme="a" style="max-width:350px;">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
Invalid username or password
</div>

<div data-role="popup" id="login_processor_error" data-transition="pop" class="ui-content" data-theme="e" data-overlay-theme="a" style="max-width:350px;">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<div id="login_processor_error_content"></div>
</div>

<ul data-role="listview" data-inset="true">


<li data-role="fieldcontain">
<label for="username">Username:</label>
<input type="text" name="username" id="username" data-mini="true"  class="required" />
</li>


<li data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password" data-mini="true" class="required" />
</li>

</ul>

<a id="loginformSubmit" href="" data-role="button" data-mini="true">Login</a>
</form>


<script type="text/javascript">
function login_form_click_handler(e){
    console.log('login_form_click_handler');
    e.preventDefault(); 
            // EDIT NOTE:  'this' is the #loginformSubmit element
            //        can setup your own var to use, such as:  var $this = $('#loginform');

             // .. do form validation, submission, etc ..
}
</script>

</div>

</div>

AV登录
无效的用户名或密码


用户名：


密码：


函数登录\表单\单击\处理程序（e）{
log（'login\u form\u click\u handler'）；
e、 预防默认值（）；
//编辑说明：“this”是#loginformSubmit元素
//可以设置您自己要使用的var，例如：var$this=$（“#loginform”）；
//…进行表格验证、提交等。。
}

您对.bind和.on的使用非常不同。您使用.on的方式是使用事件委派，事件委派可以被停止传播的事件中断

$('#loginformSubmit').bind('click', login_form_click_handler);

相当于

$('#loginformSubmit').on('click', login_form_click_handler);

然而，真正的问题是，由于调用函数的方式，您正在丢失

这个
。假设传播没有停止，下面的方法也可能有效

$(document).on('click', '#loginformSubmit', login_form_click_handler);

但是，它可能会导致双重绑定，因为它绑定到文档，因此除非您解除绑定，否则它将永远不会消失。
在jQuery mobile中，
文档在页面转换过程中通常保持不变。我指出的原因是，每当您向元素（本例中的文档）添加事件侦听器时，它都是在向已添加的任何其他事件侦听器的集合添加。这与使用
.bind
或
.on
无关。因此，每次调用（'click'、'loginformSubmit'、…
时，您都在向文档单击事件添加更多侦听器

如果将事件绑定更改为如下所示：

$('#loginformSubmit').on('click', login_form_click_handler);

您将看到与以相同方式使用
.bind
相同的结果

当您按原样使用
.on
事件绑定语法时，它会将事件侦听器添加到
$（文档）
中，但仅当它冒泡到作用域选择器
#loginformSubmit
时才会启动您的函数

也许下面的线程会有帮助：不要用
$（function（）
=
.ready（）
另外，
pageinite，pageshow
是jQM事件，它们在加载jQM之前不会工作。@Omar谢谢。我将jQM事件移出了.ready（）我在想，在加载JQM之前，我无法使用基本上不存在的事件名称，这在这段代码之后才会发生。这完全有道理，我不知道为什么我没有捕捉到，因为我知道JQM站点中的文档保持不变。谢谢！