jQuery не может использовать $ .ajax для динамически загружаемого контента - PullRequest
Новая
       18

jQuery не может использовать $ .ajax для динамически загружаемого контента

0 голосов
/ 23 марта 2012

Я работал над формой входа (AJAX).Когда пользователь нажимает на ссылку, появляется это окно входа в систему, как плавающий модал.Содержимое этого поля входа в систему загружается с другой страницы с помощью функции jQuery $ (). Load.При нажатии на ссылку загружается окно входа.Но, когда я реализовал отправку AJAX в этой форме: 

$(document).ready(function(){
    $("form#loginbox").submit(function(e){ e.preventDefault(); /*AJAX function here*/ });
});

Но форма отправляется нормально, не следуя тому, что указано в функции, то есть (Запретить использование по умолчанию - Отправка и использование AJAX).значит ли это, что загруженный контент не рассматривается внутри DOM или скрипт не может его прочитать?Я загружаю контент только один раз: 

$(document).ready(function(){
    if($("#loadedform").html() == "")
    { $(this).load('/load/login.html'); }
    $(".login-modal').slideDown('slow');
});

Структура: 

<div class="login-modal"><div id="loadedform"></div></div>

загружаемый контент: 

<form id="loginbox" method="post" action="xyz.html">
<!-- INPUT Boxes and Submit Button -->
</form>

Ответы [ 4 ]

1 голос
/ 23 марта 2012

Скрипты на странице, полученной с помощью .load(), не запускаются, поэтому ваш первый скрипт, который пытается отправить форму через AJAX, не будет выполнен.

Вместо этого переместите этот первый скрипт, чтобы он выполнялся после завершения .load(), используя обратный вызов: 

$(document).ready(function(){
    if($("#loadedform").html() == "") { 
         $(this).load('/load/login.html', function() {
             $("form#loginbox").submit(function(e){ e.preventDefault(); /*AJAX function here*/ });
         }); 
    }
    $(".login-modal').slideDown('slow');
});

Кроме того, старайтесь не использовать стиль скобок, как у вас в Javascript: 

// some statement that begins a block here
{ doStuff(); }

Это потому, что интерпретатор Javascript иногда может вставлять точки с запятой после этой первой строки, что может нарушить ваш код.

Подробнее см. В разделе Автоматическая вставка точек с запятой на странице Javascript Garden .

1 голос
/ 23 марта 2012

Изменить 

$("form#loginbox").submit(function(e){ 
    e.preventDefault(); 
    /*AJAX function here*/ 
});

на 

$('#loadedform').on("submit", "form#loginbox", function(e){ 
    e.preventDefault(); 
    /*AJAX function here*/ 
});

или если вы используете версию до 1.7: 

$('#loadedform').delegate("#loginbox", "submit", function(e){ 
    e.preventDefault(); 
    /*AJAX function here*/ 
});

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

Также похоже, что вы должны изменить код, который загружает форму, на: 

if($("#loadedform").html() == "") { 
    $("#loadedform").load('/load/login.html'); 
}
$(".login-modal').slideDown('slow');

В противном случае вы не загрузите его в нужное место.

0 голосов
/ 23 марта 2012

e.preventDefault останавливает или отменяет текущее событие, если оно может быть отменено, однако событие submit будет продолжать распространяться вверх по DOM и в любом случае может вызвать отправку.Если вы действительно заменяете функциональность кнопки по умолчанию, вы можете либо e.preventDefault и e.stopPropagation, либо просто return false.

0 голосов
/ 23 марта 2012

Вы должны делегировать динамические элементы, используя метод .on () 

$(document).on("submit","#loginbox", function() {
 e.preventDefault(); 
 /*AJAX function here*/
});
...