如何在AJAX修改元素的html後執行jQuery函數？

Question

我試圖做的經歷以下情形：

1. 用戶選擇選擇元素僱員（選項）。
2. 用戶雙擊選項/點擊一個按鈕，該按鈕通過對服務器的POST請求調用一個函數。
3. POST將返回一個帶有JSON的字符串（包含一段具有新選擇元素結構的HTML）。
4. POST回調執行兩個函數：一個用JSON內容加載數組，另一個用POST帶來的新選擇替換舊select（包含員工列表）。

直到這一點，一切工作完全正常。

1. 新選擇填充了存儲在數組中的選項（包含POST作爲JSON數據帶來的數據）。

我需要自動執行此操作。我已經可以通過在生成的新按鈕上使用單擊事件來使其工作，但是我的意圖是加載新選擇並加載其內容。

我不想生成包含其內容的新選擇，因爲用戶與內容交互時會發生更改。沒有必要重複代碼來填充jQuery和PHP中的選擇。只要一直使用jQuery爲select生成選項就簡單多了。

我試過了參數「complete」，但它仍然不起作用。

編輯：我創建了一個爵士小提琴：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。一旦數據被追加到所需的元素

觸發一個自定義事件

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

再聽聽自定義事件：

Answer 1

我建議這個

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