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

Posted 2023-02-16

【中文标题】从 JQuery 中动态创建的数据中获取点击事件

【英文标题】：get click event from dynamically created data in JQuery

【发布时间】：2013-06-26 02:45:00

【问题描述】：

下面的代码是使用 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> 内容

【问题讨论】：

您有多个具有相同 id 的元素。那不是有效的 html，您应该修复它，以便您可以通过 id 安全地选择元素。

【参考方案1】：

如果是动态元素，您需要使用基于事件传播的事件侦听器。

当您使用$('.showstudent').click(..) 注册事件处理程序时，它会在执行时执行选择器，此时动态元素可能不存在，因此事件处理程序不会附加到这些元素上

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

【讨论】：

非常感谢您的简洁解释。还有一个问题。如何获取生成的行中每个 的 id？我试过 var id = ($this).id;没有成功。

我试过了........ var id = $(this).attr('id');我可以获得每个点击的 标签的 ID。谢谢阿伦，你帮了大忙。

@user2522307 你可以简单地说var id = this.id 其中this 是被点击的元素