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

Question

我正在尝试完成以下场景:

1. 用户在 select 元素上选择员工(选项)。
2. 用户双击该选项/单击一个按钮，该按钮通过向服务器发出 POST 请求来调用函数。
3. POST 返回一个带有 JSON 的字符串(包含一段带有新选择元素结构的 HTML)。
4. POST 回调执行两个函数:一个加载包含 JSON 内容的数组，另一个用 POST 带来的新选择替换旧选择(包含员工列表)。

到目前为止一切正常。

1. 新的选择充满了存储在数组中的选项(包含由 POST 带来的数据作为 JSON 数据)。

我需要将其自动化。我已经可以通过在生成的新按钮上使用单击事件来使其工作，但我的目的是加载新的选择及其内容。

我不想生成已经包含其内容的新选择，因为随着用户与内容的交互，内容将会发生变化。无需复制代码来填充 jQuery 和 PHP 中的选择。一直使用 jQuery 来生成选择选项要简单得多。

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

编辑:我创建了一个 js fiddle :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();
});