Ни .live (), .delegate (), ни .on () не работают для форм, динамически загружаемых на страницу - PullRequest
4 голосов
/ 22 января 2012

У меня есть страница с бесконечной прокруткой. Функциональность ajax прекрасно работает с формами, существующими на странице при первоначальной загрузке, но не работает с формами, загруженными из функции ajax inifinite scroll Я искал около 5 дней, пытаясь найти ответ, и пока не нашел. Вот часть JavaScript:

$("form:not(.member)").submit(function() {
     var status_id = $('#status_id').val(), 
    etc..........

Причиной части :not(.member) является то, что другие формы на странице, такие как форма поиска, не включены в сценарий.

Я пробовал

 $("form:not(.member)").live('submit', function() {

и

 $("form:not(.member)").on('submit', function() {

а также

 $('body').delegate('submit', 'form:not(.member)', function() {

Ни одна из них не работает с формами, загруженными ПОСЛЕ начальной загрузки страницы. У кого-нибудь есть другие предложения? Я использую JQuery 1.7.1, кстати. Я также попробовал

$("form:not(.member)").bind('submit', function()

Ответы [ 4 ]

4 голосов
/ 22 января 2012

Здесь вы неправильно используете делегирование события.

Формы также загружаются динамически, поэтому они не включаются в $("form:not(.member)") при выполнении кода, их не существуетпока.

Использовать делегирование для родительского элемента, который содержит формы :

$('#formsContainer').on('submit', 'form:not(.member)', function() {
     ...
});
2 голосов
/ 30 января 2012

Ни один из приведенных выше ответов не сработал. Решением было назначить onclick = "function" для всех форм комментирования, включая уже загруженные.

2 голосов
/ 22 января 2012

Ваш синтаксис неправильный, вот и все.Эти функции должны работать.Используя .on() в качестве примера:

$('#someListener').on('submit', 'form:not(.member)', function() { ... });

Где someListener - это элемент-предок, который НИКОГДА не уничтожается функцией AJAX.Если вы пытаетесь привязать элемент, который разрушается, ваш слушатель также теряется.

Должен признать, я не думаю, что часть 'form:not(".member")' мне тоже не подходит,Вы уверены, что это правильный синтаксис для not?Я просто взял ваше слово здесь.

В любом случае, есть лучший способ: либо #someListener является предком, у которого нет других ваших форм (например, формы поиска), либо вы задаете этот конкретный видформы класса.Таким образом, вместо исключения .member форм, вы должны ЗАДАЧАТЬ именно такую ​​форму:

$('#someListener').on('submit', '.dynamicForm', function() { ... });

Или, если блок содержимого Ajax (форма и все) имеет какую-либо оболочку, вы можете добавитьКласс к нему (скажем, ".ajaxBlock") и сделать это следующим образом:

$('#someLIstener').on('submit', '.ajaxBlock form', function() { ... });
0 голосов
/ 22 января 2012
$("#parentContainer").on("submit", "form:not(.member)", function() { // code });
...