How to hang an event handler on elements loaded by Ajax?

Question

JavaScript

I can't hang an onchange event on elements created dynamically after an Ajax request.

The jQuery script on the frontend accesses the server, it sends a request there with two parameters: lines - the number of entries on the page, pages - the page number. The server returns a response in the form of a JSON array in which the first element indicates the number of pages: { "pages":87 }, and all other elements are the entries that will be displayed on this page.

The number of pages is needed to create pagination on jQuery, knowing the number of pages, after the Ajax response, I dynamically form a ul list with page numbers.
The user selects a number, after which a new Ajax request is sent to the server.

The user can change the number of entries per page

When a new number of records is sent to the server in the line parameter, the response is a new pages value - the number of pages. But here the main problem arose, the list for selecting the number of pages works for me on the onchange event, and when I want it to make a new request to the server when I click on the list, the event does not appear! Can't figure out how to run it?

Example of JSON returned:

[ { "pages":87 }, // first element with number of pages {
"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" }, ]

Perhaps the problem is that I'm running everything through a function?

Connection:

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

And here is the code of the function itself:

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 запросом

        });	
          }	        

  });	
}

Answer 1

https://api.jquery.com/click/
We can also trigger the event when a different element is clicked:
$( "#other" ).click(function() {
$( "#target" ).click() ;
});