Проблема изменения поведения динамически загружаемых форм (jQuery)

Question

У меня есть страница ввода пользователя, которая загружает различные формы с помощью ajax в зависимости от некоторых параметров, которые есть у пользователя.Я хочу сохранить данные форм также в AJAX, но он работает только с первой загруженной формой.Как только пользователь меняет параметры и загружает другую форму, изменение поведения формы, примененного с помощью jQuery, больше не работает.

Я полагаю, это происходит потому, что скрипт применяет новое поведение к форме, котораяв настоящее время на странице, но не для форм, которые загружаются позже, верно?

Я уже пытался инкапсулировать $ ('form'). submit () ... и т. д. в функцию и вызывать ее каждый разновая форма загружена, но она тоже не работает ...

Тогда, как я могу решить эту проблему?Это мой код (часть его):

function showFormUpdate(month, show) {
    //actualiza el formulario por ajax
    $('#showFormWrapper').fadeOut();

    $.post("../inc/ajax-select-show.php", {month: month, show: show}, function(data){
                    $('#showFormWrapper').html(data);
                    whatIsActive ();
                    }); 
    $('#showFormWrapper').fadeIn();             
    }

function showFormsend () {
    $.post("../inc/ajax-saveshowform.php", 
        {
        activeShow: $('input#activeShow').val(),
        activeMonth: $('input#activeMonth').val(),
        everyday: $('input#everyday').val(),
        mon: $('input#mon').val(),
        tue: $('input#tue').val(),
        wed: $('input#wed').val(),
        thu: $('input#thu').val(),
        fri: $('input#fri').val(),
        sat: $('input#sat').val(),
        sun: $('input#sun').val()
        }, function(data){
            alert (data);           
                    }); 
}

$(document).ready(function() {

    $('a.changeForm').click(function(event){
        event.preventDefault(); 
        if ($(event.target).hasClass('changeShow')){
            showFormUpdate($('input[name="activeMonth"]').val(), $(event.target).attr('show'));
            }
        if ($(event.target).hasClass('changeMonth')){
            showFormUpdate($(event.target).attr('month'), $('input[name="activeShow"]').val());
            }   
        });

    //this is the part that changes the functionality of the form,
    //but only works with the first loaded form
    $('.showForm').submit(function(event){          
        showFormsend ();    
        return false;           


        })
});

Answer 1

Возможно, вам придется использовать функцию live с вашими событиями.Когда вы уничтожаете / повторно добавляете элементы, которые соответствуют функции необработанного события при загрузке jQuery (например, .click или .submit), их события исчезают после удаления.

Чтобы обойти это, используйте .live, который будет применятьсясобытие для всех существующих и добавляемых в будущем элементов, соответствующих вашему селектору:

$('a.changeForm').live('click', function(event){

$('.showForm').live('submit', function(event){   

Answer 2

Если я правильно понимаю (что, вероятно, нет), тогда вы добавляете новые формы на страницу, используя ajax, и ваш JQuery не работает с этими новыми формами.

Один из способов исправить это -поместите этот фрагмент кода в функцию:

function someFunction() {
    $('.showForm').submit(function(event){          
        showFormsend ();    
        return false;           
    })
}

И затем вызовите эту функцию сразу после добавления форм на страницу.

$.post("../inc/ajax-select-show.php", {month: month, show: show}, function(data){
    $('#showFormWrapper').html(data);
    whatIsActive ();
    someFunction();
});

Возможно, было бы лучше добавить вызов функции вобратный вызов $ .post или .html (), если они есть.

Answer 3

Попробуйте использовать метод привязки событий jQuery live - это позволяет привязывать события к элементам DOM, которые еще даже не были загружены ...

например,

$('.showForm').live('submit', function() {
    showFormsend ();
    return false;
});

В тот момент, когда вы привязываете свою функцию к методу submit, она привязывает ее только к элементам, существующим в данный момент времени.