получить событие клика от динамически создаваемых данных в JQuery

Question

Код ниже генерируется динамически с использованием вызова Ajax и помещается в жесткий диск с именем studentresults.

<div id="studentresults" class="row span8 offset2"> 
    <table id="tablestudent" class="table table-striped table-hover center-table"> 
    <thead>Heading for my table</thead< 
     <tbody> 
     <tr id="showstudents"> 
      <td>29041</td> 
      <td>jan</td> 
      <td>jan</td> 
      <td> 
      <a class="btn" href="#">View Results »</a> 
      </td> 
      <td id="29041"> 
      <a id="29041" class="btn showstudent" href="#">Delete Student » </a> 
      </td> 
     </tr> 
     <tr id="showstudents"> 
      .... another dynamic record from Ajax... 
     </tr> 
    </tbody> 
    </table> 
</div> 

Это хорошо работает. Однако мне нужен еще один вызов Ajax в теге Delete Student. Я не могу понять, как написать функцию щелчка jQuery для этого динамического содержимого.

Вызов JQuery не работает

$('.showstudent').click(function(){ 

alert('In click'); 

}); 

Однако это работает в жестко закодированного DIV container

$('#studentresults').click(function() { 

alert('In click'); 

}); 

Как я могу получить доступ к динамическим <a> содержание

Answer 1

В случае динамического элементы, которые вам нужны, используют прослушиватели событий, основанных на событиях.

При использовании $('.showstudent').click(..) зарегистрировать обработчик события, он выполняет селектор во время выполнения и динамические элементы не могут присутствовать в то время, таким образом, обработчики событий не будут привязываться к этим элементам

$(document).on('click','.showstudent', function(){ 
    alert('In click'); 
});