Question

我正在使用jQuery Mobile，并且在我的主页上，如果需要，请使用此代码显示登录信息：

 $.mobile.changePage( "login.html", { transition: "slideup"} );

在登录时，我有一个表单，然后这个事件将触发，做一些事情然后提交：

$(document).ready(function(){
    $('#login').submit(function() {
              alert('about to do stuff...');

            }); 

});

问题是如果我通过ajax加载页面，似乎永远不会绑定到登录表单。如果我不通过ajax加载，我将失去过渡。我怎样才能让它发挥作用？

谢谢！

Answer 1

首先要意识到的是，document.ready在jquery移动世界中并不那么重要。 DOM完成后会触发document.ready。你想要的是围绕每个“页面”的页面创建和页面转换触发的事件。

您想要的是： pageinit 。

//Triggered on the page being initialized, after initialization occurs. We recommend 
//binding to this event instead of DOM ready() because this will work regardless 
//of whether the page is loaded directly or if the content is pulled into another 
//page as part of the Ajax navigation system.


$( '#loginPage' ).live( 'pageinit',function(event){
  alert( 'This page was just enhanced by jQuery Mobile!' );
});

如果您愿意，可以绑定到登录表单或该“页面”的任何其他部分（如果您愿意）。您也可以通过实时加入表单。

此...

$('#login').submit(function() {
    alert('about to do stuff...');
});

变成这个......

$('#login').live('submit', function() {
    var $form = $(this);
    alert('about to do stuff...');
});

唯一的问题是，您使用的“实时”事件越多，您的应用程序就会越陷入困境。它导致很多事件冒泡。

为了获得最佳性能，您应该只使用命名函数并在表单标记本身上使用onsubmit。我知道这可能不是时髦，但它是最快的解决方案。

Answer 2

我对jQuery Mobile框架并不熟悉，但如果它像jQuery框架那样你可能想尝试.live('submit', function(){....

Answer 3

我还没有使用过Jquery Mobile，但是如果你通过Ajax加载页面，如果在事实之后将页面元素（比如表单）添加到DOM中，绑定就不起作用了。您可以使用.live()绑定到页面上已有或将来的页面表单元素。

Answer 4

如果在Ajax调用之后遇到查询困难，那么这个特定任务就有一个ajaxEvent。

.ajaxComplete（）参考：http://api.jquery.com/ajaxComplete/

当您使用Ajax时，这是一个比.ready（）或.live（）更合适的事件。

通过ajax jquery mobile加载页面后，jquery方法不会触发

4 个答案: