动态加载表单jQuery的问题更改行为

如何解决动态加载表单jQuery的问题更改行为

| 我有一个用户输入页面，该页面根据用户具有的某些选项使用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;           


        })
});

    

解决方法

        您可能必须在事件中使用实时功能。当您在jQuery加载时销毁/重新添加与原始事件功能匹配的项目时（如.click或.submit），一旦删除它们的事件就会消失。 要解决此问题，请使用.live将事件应用于与选择器匹配的所有现有和将来添加的元素：

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

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

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

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

当您将函数绑定到

submit

方法时，它仅将其绑定到当时存在的元素。     ,        如果即时通讯正确地理解了这一点（我可能不是），则您使用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（）的回调中（如果有的话）。