2016-07-24 5 views
-1

Моя ситуация: У меня есть элемент, который через AJAX загружает результаты поиска в элемент. HTMLjquery append после ajax content

<input class="search"> 
<div class="search-results"> 
    // in default is empty 
    // after search add <a></a> 
</div> 

JQuery

$("input.search").change(function() { 
    $(".search-results").append('<div class="searchResultsOverlay"></div>'); 
}); 

как добавить (Jquery) elemtent после нагрузки результатов? Я пытаюсь изменить на вход, но это частично решение. Когда я использую функцию .change, append работает над вводом или щелчком внешнего входа, но если я помещаю курсор во входные данные, результаты загружаются и присоединяются к ожиданию действия (введите, нажмите).

Как я могу вызвать jQuery после добавления Ajax контента?

ТНХ

+0

есть ли у вас страница с jquery –

+0

В вашем коде не указан запрос ajax, если бы был предоставлен ваш айхакс-вызов и рассказать нам, почему вы не указали свой код там , –

+0

попробуйте поместите jquery функция внутри AJAX успех функция после ajax load поиск предмет сделан – Vaibhav

ответ

0

KeyUp событие Использовать JQuery в

$(".search").keyup(function() { 
    $(".search-results").html('<div class="searchResultsOverlay"></div>'); 
}); 
0

Объявите свойство success в объекте Аякса данных, это функция обратного вызова. Затем сделайте что угодно в блоке success.

$.ajax({ 
    success: function(response) { 
     /* Whatever; response is the server response */ 
    } 
}); 
1

$.ajax() возвращает объект jqXHR со всеми методами в Promise. Поэтому вы можете использовать .done(function(data, textStatus, jqXHR) {}) для выполнения кода, когда возвращается результат вашего XHR.

В качестве примера ...

$.ajax({ 
    url: "http://fiddle.jshell.net/favicon.png", 
    beforeSend: function(xhr) { 
     xhr.overrideMimeType("text/plain; charset=x-user-defined"); 
    } 
}) 
.done(function(data) { 
    if (console && console.log) { 
     console.log("Sample of data:", data.slice(0, 100)); 
    } 
}); 

Вот некоторые другие методы, доступные от объекта jqXHR

jqXHR.done(function(data, textStatus, jqXHR) {}); 
jqXHR.fail(function(jqXHR, textStatus, errorThrown) {}); 
jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { }); 
jqXHR.then(function(data, textStatus, jqXHR) {}, function(jqXHR, textStatus, errorThrown) {}); 

Посмотрите здесь для получения дополнительной информации по каждому из них: http://api.jquery.com/jquery.ajax/#jqXHR