jQuery onclick событие, работающее над созданием нескольких запросов ajax

Question

Я делаю несколько запросов ajax в моем файле jQuery. При успехе этих запросов jQuery я написал несколько сообщений о кликах, которые не работают.

Это мой код

$(document).ready(function(){ 

$.ajax ({ 
    type: "POST", 
    url: 'myServlet', 
    async: false, 
    success: function (response) { 
     id = parseInt(response); 
     setOutputEvents(); 
    } 
}); 

function setOutputEvents() { 
    for (var queryNumber = 0; queryNumber <= id; queryNumber++) { 
     $.ajax({ 
      type: "POST", 
      url: 'myOtherServlet', 
      data: {queryNumber: queryNumber}, 
      success: success, 
      async: false 
     }); 

     var success = function (response) { 
      //some code here 
       generateTable(); 
     } 
    } 
} 

function generateTable() { 
    //some code here 
    pagination(); 
} 

function pagination(){ 
    $(".class").click(function(event) { 
     alert(); 
    }); 
} 

$("#me").on("click", function(){ 
    alert("me is triggered"); 
}); 
}); 

Я понимаю, что делает несколько запросов AJAX является плохой практикой программирования, но то, что может быть причиной на кликах не получает срабатывает?

Это события onclick, которые не работают.

function pagination(){ 
    $(".class").click(function(event) { 
     alert(); 
    }); 
} 

$("#me").on("click", function(){ 
    alert("me is triggered"); 
}); 

Я использую Google Chrome версии 39.0.2171.95 на Windows 7.

Пожалуйста, дайте мне знать, если любая дополнительная информация необходима.

Answer 1

Поскольку вы используете ajax для загрузки даже исходного содержимого, кажется, что элементы класса .class/#me html не существуют при начальной загрузке DOM на странице. Поскольку вы не отправляли html, я предполагаю, что это так.

Таким образом, вы должны использовать делегированные обработчик события щелчка, чтобы ответить на него

так, вы бы изменить

$("#me").on("click", function(){ 

к

$(document).on("click", "#me", function(){ 

и так далее, чтобы связать его с родительский элемент, который существует, сам документ.

Answer 2

Это будет работать:

$(".class").on("click", function(){ 
    alert("me is triggered"); 
}); 

function generateTable() { 
    //some code here 
    pagination(); 
} 

function pagination(){ 
    $(".class").trigger("click"); 
} 

Некоторые примечания:

1. обработчик событий должен быть зарегистрирован до запуска щелчка.
2. Селектор с триггерным щелчком должен соответствовать классу с зарегистрированным кликом.
3. Функции должны быть определены перед использованием.