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

Question

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

1. 用户在选择元素上选择一个员工（选项）。 2. 用户双击该选项/单击调用POST请求函数的按钮。 3. POST返回一个包含新选择元素结构的HTML片段的JSON字符串。 4. POST回调执行两个函数：一个将数组与JSON内容加载到内存中，另一个将旧选择（包含员工列表）替换为POST带来的新选择。 5. 到此为止一切都工作得很好。

我需要自动化这个过程。我已经使用新生成的按钮的点击事件使其正常工作，但我的意图是加载已经填充了内容的新选择。

我不想生成新的选择并且已经填充了它的内容，因为当用户与内容交互时会更改内容。没有必要在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的变化。

- Leandro

---

jQuery只能感知页面上它运行时存在的元素，所以添加到DOM中的新元素将无法被jQuery识别。为了解决这个问题，可以使用事件委托，将事件从新添加的元素向DOM树中已在jQuery页面加载时存在的某一点冒泡。许多人使用document作为捕获冒泡事件的位置，但并不必要沿着DOM树往上走那么高。理想情况下，应该委派到在页面加载时存在的最近父级。 - Jay Blanchard

我正在做这个来让按钮起作用：$(".usermanagement-canvas").on("click","button.testbutton",display_user_apps);然而，我不想使用按钮。在这种情况下，我需要一种事件来检测当HTML被AJAX改变时。你能看到吗？ - Leandro

你能给我们提供一个 JS Fiddle 吗？ - John Chrysostom

这可能是查看 jQuery 的 promise API（$.ajax 实现的）的好机会。您可以以适合工作流程的方式链接这些任务。或者，您可以附加到 $.ajaxComplete，但您必须将其简化以确定是否要针对所需的 ajax 调用。 - Brad Christie

非常简单。只需访问此网站：https://jsfiddle.net/，保存您的工作，并与我们分享您的链接。 - CodeGodie

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();
});

- kapantzak