Question

我正在尝试执行以下方案：

用户在select元素上选择一个雇员（选项）。
用户双击选项/点击一个按钮，该按钮通过对服务器的POST请求调用函数。
POST返回一个带有JSON的字符串（包含一段带有新select元素结构的HTML）。
POST回调执行两个函数：一个用JSON内容加载一个数组，另一个用POST替换旧的select（包含一个雇员列表）。

在此之前，一切都运转良好。

新选择填充了存储在数组中的选项（包含POST作为JSON数据提供的数据）。

我需要自动化这个。我已经可以通过在生成的新按钮上使用click事件来使其工作，但我的意图是加载新的select并加载其内容。

我不想生成包含其内容的新选择，因为当用户与内容交互时将会更改。没有必要复制代码来填充jQuery和PHP中的select。只使用jQuery来生成select的选项会更简单。

我尝试了参数“完整”，但它仍然不起作用。

编辑：我创建了一个js小提琴：https://jsfiddle.net/bmv35vwz/

我的代码：

function load_edituser(){
    iduser = $("select.showallusers option:selected").val();
    name = $("select.showallusers option:selected").text();
    $.ajax({'url': base_url+'/ManageUser/open_edituser',
            'type': 'POST',
            'data':{'iduser': iduser, 'name': name},
            'success' : function(data){
                var container = $('.usermanagement-canvas');
                if(data)
                {
                    get_user_apps(); //it loads the array with the JSON data, it's another POST function.
                    container.html(data);
                }
                else
                    alert('Error!!');
            },
            'complete': function()
            {
                display_user_apps(); //This is the function that fills the select with options, not being called here.
            }
    });     
}


function get_user_apps(){   

    //alert("it works! name: "+name+" id: "+iduser);

    $.ajax({'url': base_url+'/ManageUser/get_json_user_apps',
            'type': 'POST',
            'data':{'iduser': iduser, 'name': name},
            'success' : function(data){
                //alert("Hell yes");
                //var container = $('.usermanagement-canvas');
                if(data)
                {
                    appsinfo = JSON.parse(data);
                }
                else
                    alert('Error!!');
            }   
    });     
}

function display_user_apps()
{
    //alert(appsinfo.currentapps.length);

    //alert("Shut up");

    var i;
    for (i = 0; i < appsinfo.currentapps.length; i++)
    {
        var id = appsinfo.currentapps[i].idApplication;
        var appName = appsinfo.currentapps[i].appName;

        currentlist += "<option value="+id+">"+appName+"</option>";         
    }
    $("select.left-current").html(currentlist);

    for(i=0; i < appsinfo.excludedapps.length; i++)
    {
        var id = appsinfo.excludedapps[i].idApplication;
        var appName = appsinfo.excludedapps[i].appName;

        notallowedlist += "<option value="+id+">"+appName+"</option>";  
    }
    $("select.right-excluded").html(notallowedlist);
}

修改

我知道委派活动。我用它来做按钮工作：

$(".usermanagement-canvas").on("click","button.testbutton",display_user_apps);

但是，我不想使用按钮。我希望在AJAX更改div的html后自动触发该函数。在这种情况下，我需要某种检测HTML被更改的事件。

Answer 1

我会建议：

将数据附加到所需元素后立即触发自定义事件

'success' : function(data){
     var container = $('.usermanagement-canvas');
     if(data)
        {
          get_user_apps(); 
          container.html(data);
          $(document).trigger('htmlAppended');
        }
          else {
              alert('Error!!');
        }
     },

然后听取自定义事件：

$(document).on('htmlAppended', function() {
   get_user_apps();
});

如何在AJAX修改元素的html后执行jQuery函数？

1 个答案: