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

我试图做的经历以下情形：如何在AJAX修改元素的html后执行jQuery函数？

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

直到这一点，一切工作完全正常。

新选择填充了存储在数组中的选项（包含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!!'); 
     } 
    },

再听听自定义事件：

来源

2015-06-23 Leandro

的jQuery仅在运行时才了解页面中的元素，因此添加到DOM的新元素无法被jQuery识别。为了防止[事件委托]（http://learn.jquery.com/events/event-delegation/）的使用，将新添加的项目中的事件冒泡到jQuery在页面加载时运行时出现的DOM点。许多人使用'document'作为捕捉冒泡事件的地方，但是没有必要把它放在DOM树上。理想情况下[你应该委托给页面加载时存在的最近父母]（http://stackoverflow.com/a/12824698/1011527） –

我这样做使按钮工作： $（“ .usermanagement-单击画布”， “button.testbutton”，display_user_apps） “）上（。”; 但是，我不想使用按钮。在这种情况下，我需要某种事件来检测AJAX更改HTML的时间。你能看到吗？ – Leandro

你能给我们一个js小提琴吗？ –

我建议这个

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

来源

2015-06-23 14:33:19 kapantzak

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

回答

相关问题