не удается получить доступ к объекту, сделанное Ajax вызова

Question

У меня есть этот запрос Ajax:

$.ajax({ 
      type: "POST", 
      dataType: "json", 
      data: dataString, 
      url: "app/changeQuantity", 
      success: function(data) { 
$('#table').append('<tr><td><a id="uid">click</a></td></tr>'); 

}); 

, как вы можете видеть, что делает новую строку в #table. Но эти новые объекты, созданные ajax, недоступны из следующих функций. Результат от ajax не является регулярной частью DOM, или в чем причина этого странного поведения?

$('#uid').on('click', function() { 
alert('ok'); 
}); 

Answer 1

Обратите внимание, что ajax вызовов являются асинхронными. Итак, что бы вы ни делали с data, вам нужно сделать это в обратном вызове в функции success (то есть обратном вызове, который вызывается, когда вызов ajax возвращается успешно).

Answer 2

Используйте событие делегации:

$(document).on('click','#uid', function() { 
alert('ok'); 
}); 

Answer 3

Попробуйте это так, добавьте $('#uid').on('click', function() { в успех

$.ajax({ 
     type: "POST", 
     dataType: "json", 
     data: dataString, 
     url: "app/changeQuantity", 
     success: function(data) { 
      $('#table').append('<tr><td><a id="uid">click</a></td></tr>'); 
      $('#uid').on('click', function() { 
       alert('ok'); 
      }); 
     }); 
}); 

Answer 4

Jquery on не работает так. Использование должно дать родитель, который не загружен на AJAX, и указать АЯКС элемент нагрузки, как этого

$('#table').on('click','#uid' ,function() { 
// what ever code you like 
}); 

Answer 5

Просто и сложно одновременно. Простота решения, но сложная, если вы начинаете с javascript ...

Ваш обработчик событий - onclick запускается и привязывается к объекту, который еще не существует.

Поэтому, когда вы добавляете объект в # таблицу, вам нужно настроить обработчик кликов, поскольку объект теперь существует.

Итак, в вашей успешной части возврата ajax добавьте событие обработчика кликов.

success: function(data) { 
      $('#table').append('<tr><td><a id="uid">click</a></td></tr>'); 
      $('#uid').on('click', function() { 
       alert('ok'); 
      }); 
     }); 

Или как насчет того, чтобы вы сделали его динамичным и создали функцию, чтобы сделать это за вас.

function bindClick(id) { 
    $('#' + id).click(function() { 
    //Do stuff here 
    console.log('I made it here' + id); 
    }); 
} 

Тогда:

success: function(data) { 
    $('#table').append('<tr><td><a id="uid">click</a></td></tr>'); 
    bindClick(uid); 
    }); 
} 

Это супер надуманный пример, но вы получите идею нужно просто сделать остальное динамичны, как хорошо. например, некоторое имя и счетчик сгенерированный идентификационный номер: id1, id2, id3 ...