.map найти элементы после загрузки через AJAX

Question

У меня есть следующая функция getItemID, она ищет все ID под определенным родительским ID (#search-output). Если идентификатор (#test) был загружен при загрузке страницы, getItemID находит идентификатор без проблем.

Однако я на самом деле строить эти идентификаторы (#test) в режиме реального времени с помощью AJAX, так что моя функция getItemID должна быть в состоянии найти эти идентификаторы (#test), которые загружаются через AJAX.

Я думаю, что проблема здесь .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; 
    } 
} 

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

Answer 1

Одна из возможных проблем здесь есть, вы звоните getItemID, прежде чем запрос Ajax завершен, теперь search-output не имеют детей, поэтому метод не будет найдено ни одного элемента идентификаторами, чтобы вернуться.

Таким образом, решение заключается в вызове метода getItemID после завершения вызова ajax и обновления dom.

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

Answer 2

Попробуйте с использованием 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] 
});