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

Question

我正在使用 jQuery Mobile，并在我的主页上使用此代码来显示登录(如果需要):

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

在登录中，我有一个表单，然后该事件将触发，做一些事情然后提交:

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

            }); 

});

问题是，如果我通过 ajax 加载页面，似乎永远不会绑定(bind)到登录表单。如果我不通过 ajax 加载，我就会失去转换。我怎样才能让它工作？

谢谢!

Answer 1

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

您想要的是: 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!' );
});

如果您愿意，您可以绑定(bind)到登录表单或该“页面”的任何其他部分。您也可以直接通过 live 连接到表单。

这个...

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

变成这样...

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

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

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