Функции не работают в Ajax через некоторое время

Question

У меня есть вход, который при изменении должен отправить это значение в ajax и получить ответ обратно.Ajax работает правильно и входит в успех, но не работает click функция внутри него, если я не делаю изменения или нажимаю.Если я щелкаю сразу после ответа, это работает, но если я не делаю изменения в течение 4-5 секунд, это что-то вроде закрытия сессии.Как я могу избежать этого времени?

вот мой пример ajax

$('#unvan_search').on('keyup change', function() {

  var unvan = $(this).val();

  $.ajax({

    type: "POST",
    url: url,
    data: {
      'tpIdRegion': region_type_id_j + '_' + region_id_j,
      'road': unvan,
      'guid': my_key
    },
    beforeSend: function() {
      console.log('before send');
    },
    success: function(e) {
      console.log('suceess');
      var output = [];


      for (var i = 0; i < e.names.length; i++) {
        output.push('<li class="get_street es-visible" idx="' + e.names[i].X + '" idy="' + e.names[i].Y + '" id="' + e.names[i].ID + '" value="' + e.names[i].ID + '" style="display: block;">' + e.names[i].Name + '</li>');
        console.log('filled');
      };
      $('#unvan_select_div ul').html(output.join(''));

      $("#unvan_select_div ul").on("click", '.get_street', function() {
        //MY CODE HERE WHICH I CAN NOT USE AFTER 4-5 SECONDS
      });

    },
    error: function(x, t, m) {
      alert("error");
    }
  });


});

Answer 1

Это может работать, если вы структурируете это так.

var ret = false;
  $.ajax({
    type: "POST",
    url: url,
    data: {
      'tpIdRegion': region_type_id_j + '_' + region_id_j,
      'road': unvan,
      'guid': my_key
    },
    beforeSend: function() {
      console.log('before send');
    },
    success: function(e) {
      ret = true;
      console.log('suceess');
      var output = [];

      for (var i = 0; i < e.names.length; i++) {
        output.push('<li class="get_street es-visible" idx="' + e.names[i].X + '" idy="' + e.names[i].Y + '" id="' + e.names[i].ID + '" value="' + e.names[i].ID + '" style="display: block;">' + e.names[i].Name + '</li>');
        console.log('filled');
      };

      return;
    },
    error: function(x, t, m) {
      alert("error");
    }
  });
});
if(ret) {
      $('#unvan_select_div ul').html(output.join(''));

      $("#unvan_select_div ul").on("click", '.get_street', function() {
        //MY CODE HERE WHICH I CAN NOT USE AFTER 4-5 SECONDS
      });
}

Answer 2

Эта привязка здесь:

$("#unvan_select_div ul").on("click", '.get_street', function() { ... }

Нет необходимости объявлять ее в обратном вызове success.Для этого существует привязка делегатов такого типа: возможность обрабатывать события в элементах, созданных на более позднем этапе