0

我已经编辑了我的原始代码示例以包含我应该这样做的“正确方式”

我正在开发一个 jquery 移动项目，我注意到如果我使用 ON 来绑定单击，它将在第一次加载页面时工作，但如果我返回到页面，那么每次返回时我都会得到另一个绑定。如果我使用 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>

这是#page_login 页面的正文部分

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

2 回答 2

1

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

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

相当于

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

但是，真正的问题是，this由于调用函数的方式，您正在输掉比赛。假设传播没有停止，以下可能也可以工作。

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

但是它可能会导致双重绑定，因为它已绑定到文档，因此除非您取消绑定，否则它永远不会消失。

于 2013-08-19T16:10:12.793 回答
1

在 jQuery mobile 中，document通常通过页面转换保持不变。我指出这一点的原因是，每当您向元素（在本例中为文档）添加事件侦听器时，它都会添加到已添加的任何其他事件侦听器的集合中。这与您是否使用.bind或无关.on。因此，每次您调用时，.on('click', '#loginformSubmit', ...您都会向该文档单击事件添加更多侦听器。

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

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

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

当您按原样使用.on事件绑定语法时，它会将事件侦听器添加到，$(document)但只有当它冒泡到作用域选择器时才会触发您的函数#loginformSubmit。

jQuery .on 文档

于 2013-08-19T16:31:13.093 回答