Question

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

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

我认为这里的问题是.map(function(){}) getItemID在页面加载后无法找到添加到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; 
    }
}

返回HTML的JavaScript AJAX：

$.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]);
    }
});

Answer 1

尝试使用deferred.done( doneCallbacks [, doneCallbacks ] )

延迟时调用的函数或函数数组 已经解决了。

$.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]
});

Answer 2

这里可能存在的一个问题是，在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
    }
});

.map通过AJAX加载后查找元素

2 个答案: