Question

我有一个用户输入页面，根据用户的一些选项，使用ajax加载不同的表单。我想用AJAX保存这些表单数据，但它只适用于加载的第一个表单。一旦用户更改了选项，并加载了不同的表单，使用jQuery应用的表单行为的更改将不再有效。

我猜这种情况正在发生，因为脚本正在将新行为应用于当前页面上的表单，而不是稍后加载的表单，对吧？

我已经尝试在函数中封装$（'form'）。submit（）... etc并在每次加载新表单时调用它，但它也不起作用......

然后，我该如何解决这个问题？这是我的代码（其中一些）：

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

您可能必须在活动中使用实时功能。当jQuery加载时（例如.click或.submit）销毁/重新添加与原始事件函数匹配的项目时，一旦删除它们，它们的事件就会消失。

要解决此问题，请使用.live将事件应用于与您的选择器匹配的所有现有和将来添加的元素：

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

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

Answer 2

尝试使用jQuery live事件绑定方法 - 这允许您将事件绑定到尚未加载的DOM元素...

e.g。

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

当您将函数绑定到submit方法时，它只将它绑定到那个时刻存在的元素。

Answer 3

如果我正确地理解了这一点（我可能不是这样），那么你使用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（）的回调中添加函数调用（如果有的话）。

问题改变动态加载表单的行为（jQuery）

3 个答案: