Question

我在jQuery中有一个ajax调用，它返回并在我的站点中插入一些HTML。在同一个调用中，在成功回调中，我想用返回的html“做东西”。

一些代码（简化）：

$.ajax({
    url: "some_url.php",
    type: 'POST',
    dataType: 'json',
    data: some_data,
    success: function(response){

        myAsyncAjaxInsertHtmlFunction(response); // 1. This function is an ajaxcall which inserts HTML dynamically

        $(newlyAddedSelector + ' input').each(function(){ // 2. Here I want to iterate over those dynamically added html elements
            doStuffWithNewlyAddedHtml(this.value);

        });
    }
});

问题是，当代码执行到达第2点时，动态添加的html尚未加载。我知道async：false存在，但这不是我想要的路径。

你应该如何处理这种情况，我可以想象这种情况很常见？

Answer 1

您可以使用fct（）。done（）等到执行ajax之后再进行第二个过程

function ajax1() {
    return $.ajax({
        url: "someUrl",
        ...
    });
}


ajax1().done(function(){
        // the code here will be executed when ajax requests resolve.
    });

已编辑

Answer 2

 var insered = false;
 $.ajax({
    url: "some_url.php",
    type: 'POST',
    dataType: 'json',
    data: some_data,
    success: function(response){

        myInsertHtmlFunction(response); // 1. This function inserts HTML dynamically
        insered = true;

        },
    complete: function(){
        if( insered == true ) {
              $(newlyAddedSelector + ' input').each(function(){ // 2. Here I want to iterate over those dynamically added html elements
                 doStuffWithNewlyAddedHtml(this.value);
             });
        }
    }
});

您可以在完整方法中完成最终内容的插入html。

Answer 3

除非myInsertHtmlFunction函数执行某些操作async，否则您的代码应该有效，因为添加和删除HTML元素始终同步。

但是如果您的应用程序逻辑也修改了HTML，取决于一些新添加的元素的加载状态，例如，如果新添加的图像完成加载则添加div，那么您的代码将失败。

这完全取决于myInsertHtmlFunction功能。

如何使用jQuery.ajax修改动态添加的html？

3 个答案: