@inviziblll

Как повесить обработчик события на элементы загруженные Ajax?

Не могу повесить Событие onchange на элементы созданные динамически после Ajax запроса.

jQuery скрипт на фронтенде обращается к серверу, он отправляет туда запрос с двумя параметрами: lines - количество записей на странице, pages - номер страницы. Сервер возвращает ответ в виде JSON массива в котором первый элемент указывает количество страниц: { "pages":87 }, а все остальные элементы - это записи которые будут выводится на данной странице.

Количество страниц нужно для создания постраничной навигации на jQuery, зная число страниц, после Ajax ответа я динамически формирую ul список с номерами страниц.
Пользователь выбирает номер, после чего к серверу идет новый Ajax запрос.

Пользователь может менять число записей на странице

Когда на сервер отправляется новое число записей в параметре line, в ответ приходит новое значение pages - количества страниц. Но здесь и возникла основная проблема, список выбора количества станиц у меня работает на событие onchange, и когда хочу чтобы он сделал новый запрос на сервер при клике на список , события не появляется! Не могу понять как можно его запустить?

Пример возвращаемого JSON:

[ { "pages":87 }, // первый элемент с количеством страниц {
"feedback_id":"1", "name":"john", "feedback":"my 1st comment", "feedback_date":"2014-12-16 09:36:29", "pages":"0" }, { "feedback_id":"2", "name":"caty", "feedback":"something to write about", "feedback_date":"2014-12-16 09:36:29", "pages":"0" }, ]

Возможно проблема в том, что я запускаю все через функцию?

Подключение:

$(document).ready(function(){ var pageData = {}; // данные для постраничной навигации 
NumberResources(pageData); // выводим список 
});


А вот код самой функции:

function NumberResources(pageData){
	
	//...
	$.ajax({
	        url: "database-test.php",
	        type:"GET",
	        data: {"lines": pageData['records_per_page'], "pages": pageData['current_page']},
	        dataType: 'json',
	        success: function(response) {
	        	
	        	var pages;  // количество ВСЕХ страниц 
				var output;	// строки  выводимые на странице			    
				var i = 0;

				$.each(response, function(key, val) { // обходим массив записей
						
					if(key!=0){

						// вывод записей	....

					}else {
					
						// получаем число ВСЕХ страниц				
						pageData['total_pages'] = Number(val.pages); 
					
					}	
										 
				});

                PageNavigation(pageData); // вызов постраничной навигации	
	            $('#update').prepend(output); // выводим в таблицу строки из базы

			//... 

		   // ВЫБИРАЕМ ЧИСЛО СТРАНИЦ
		   $('select').on('change', function () {					
					
				$('select option:selected').each(function() {
						$('#update').empty();
						var pageData = {};
						pageData['current_page'] = parseInt($('li.active .number').text());
						records_per_page = $(this).val();		
											
					$('#records_per_page').empty();
					$('#records_per_page').prepend(records_per_page);
					NumberResources(pageData); // рекурсивно обращаюсь к функции с Ajax запросом

				});	
	        }	        

	});	
}
  • Вопрос задан
  • 603 просмотра
Пригласить эксперта
Ответы на вопрос 1
dmitry_pavlov
@dmitry_pavlov
World-class .NET freelance contractor (remotely)
https://api.jquery.com/click/

We can also trigger the event when a different element is clicked:

$( "#other" ).click(function() {
$( "#target" ).click();
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы