.map-find元素一旦通过AJAX加载

.map find elements once loaded via AJAX

本文关键字：AJAX 加载 元素 map-find      更新时间：2023-09-26

我有以下函数getItemID，它查找某个父ID (#search-output)下的所有ID。如果ID (#test)是在页面加载时加载的，则getItemID会找到没有问题的ID。

然而，我实际上是通过AJAX实时构建这些ID的(#test)，所以我的函数getItemID需要能够找到通过AJAX加载的这些ID的(#test)。

我认为这里的问题是getItemID中的.map(function(){})在加载页面后找不到添加到DOM中的元素。我需要一种方法让这个.map找到所有元素，而不管它们是何时加载的。

这是有效的：HTML:

<div id="search-output">
    <div id="test"></div>
</div>

这不起作用：HTML:

<div id="search-output">
</div>

JavaScript getItemID函数：

function getItemID(){
    var ID = $('#search-output [id]').map(function(){
        return this.id;
    }).get();
    if(ID.length == 0){
        return null;
    }else{
        return ID; 
    }
}

JavaScript AJAX，返回HTML:

$.ajax({
    url:'lib/search-server.php',
    type:'POST',
    data: {
        search: "*"
    },
    dataType:'json',
    success: function(data){
        /* data[0] contains "<div id="test"></div>" */
        $('#search-output').append(data[0]);
    }
});

这里的一个可能问题是，在ajax请求完成之前调用getItemID，现在search-output没有任何子级，所以该方法找不到任何要返回的元素id。

因此，解决方案是在ajax调用完成并更新dom之后调用getItemID方法。

$.ajax({
    url: 'lib/search-server.php',
    type: 'POST',
    data: {
        search: "*"
    },
    dataType: 'json',
    success: function (data) {
        /* data[0] contains "<div id="test"></div>" */
        $('#search-output').append(data[0]);
        //now call the method
        var ID = getItemID();
        //do other stuff
    }
});

尝试使用deferred.done（doneCallbacks[，doneCallacks]）

当Deferred已解决。

$.ajax({
    url:'lib/search-server.php',
    type:'POST',
    data: {
        search: "*"
    },
    dataType:'json'
  })
  .done([function(data){
        /* data[0] contains <div id="test"></div> */
        $('#search-output').append(data[0]);
    }, getItemID]
});
相关文章：