Метод jquery не запускается после загрузки страницы через ajax jquery mobile

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. 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!' );
});

Если вы хотите, вы можете привязать к форме входа или любой другой части этой «страницы», если хотите. Вы также можете просто подключиться к форме вживую.

Этот ...

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

становится этим ...

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

Единственное, что с этим связано, - чем больше «живых» событий вы используете, тем больше будет зависать ваше приложение. Это вызывает много пузырей событий.

Для лучшей производительности вы должны просто использовать именованную функцию и подключить onsubmit к самому тегу формы. Я знаю, что это может быть не модно, но это самое быстрое решение.

Answer 2

Если вы боретесь с запросом после вызова Ajax, для этой конкретной задачи есть ajaxEvent.

.ajaxComplete () См .: http://api.jquery.com/ajaxComplete/

Это более подходящее событие, чем .ready () или .live (), когда вы работаете с Ajax.

Answer 3

Я еще не использовал Jquery Mobile, но если вы загрузите страницу через Ajax, привязки не будут работать, если элементы страницы (например, ваша форма) будут добавлены в вашу DOM после этого.Вы можете использовать .live () для привязки к элементам формы страницы на странице уже или в будущем.

Answer 4

Я не очень знаком с фреймворком jQuery Mobile, но если он похож на фреймворк jQuery, вы можете попробовать .live('submit', function(){....