jQuery click() 事件打开<a>，ID 具有特定前缀，不会触发 alert() 函数

Question

我正在尝试设置一个函数，该函数将侦听具有具有特定前缀的 id 值的 <a> 标签，然后执行某些操作。这是我所拥有的：

$(document).ready(function() {
  
  $("#mytable").DataTable();
  $('a[id |= "food"]').click(function() {
    alert("A food link was clicked!");
    });
  
 });

.some-class {
  text-decoration: none;
  color: black;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link type = "text/css" rel = "stylesheet" href = "https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" />
<div>
  <table id = "mytable">
    <thead>
      <tr>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <a id = "food-1" class = "some-class" href = "#">Bacon</a>
        </td>
      </tr>
      <tr>
        <td>
          <a id = "food-2" class = "some-class" href = "#">Pancakes</a>
        </td>
      </tr>
      <tr>
        <td>
          <a id = "drink-1" class = "some-class" href = "#">Beer</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

出于某种原因，在此处的代码片段中，它按预期完美运行。但是，在我的浏览器（Firefox 43.0.3和Chrome 47.0.2526.111）中，没有响应。我知道就不可重现的问题提出问题是一种不好的形式，但我希望有人知道是什么阻止了这个函数的运行。没有错误，我的所有其他javascript/jquery函数都运行。即使减少我的 jquery 函数$("a").click(function()...)也不起作用。似乎它没有认识到正在单击链接的事实。

任何帮助将不胜感激。

更新

我一直在做各种事情，试图弄清楚为什么 JQuery 在单击链接时没有触发警报，但似乎 JQuery 根本无法真正与 DataTable 交互。以下代码对表没有影响。

$("#mytable").find("tr").css("background-color", "#000");

下面的代码生成一个长度为 0 的对象：

$("#mytable").children();

我完全不知道为什么JQuery很难与DataTable进行交互。

Answer 1

由于

dataTables插件会操纵页面中的html，因此您的问题可能需要使用事件委派

当元素从页面中删除并替换为相同的 html 时。附加的任何事件侦听器都将丢失

此外，ID 不应该重复，因此请将它们更改为类

尝试

$('#mytable').on('click', 'a.food', function(){
    alert("A food link was clicked!");
});

Answer 2

原因

jQuery DataTables 出于各种原因操作 DOM，因此直接附加的事件处理程序仅适用于第一页。

溶液

您需要通过在 on（） 调用中提供选择器作为第二个参数来使用事件委派，请参见下面的示例：

$(document).ready(function() {
   $("#mytable").DataTable();
   $('#mytable').on('click', 'a[id|="food"]', function(){
      alert("A food link was clicked!");
   }); 
});

来自 jQuery on（） 方法文档：

委托事件的优点是它们可以处理来自 稍后添加到文档中的后代元素。

有关更多信息，请参阅 jQuery on（） 方法文档中的"直接和委托事件"和 jQuery DataTables – 为什么单击事件处理程序不起作用。

请参阅此 jsFiddle 以获取代码和演示。