Question

下面的代码是使用Ajax调用动态生成的，并放在一个名为 studentresults 的硬编码div中。

<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>

工作正常。但是我想在Delete Student标签上另一个Ajax调用。我无法理解如何为这个动态内容编写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');
});

从JQuery中动态创建的数据中获取click事件

1 个答案: