javascript - 上的 jquery click() 事件具有特定前缀的 id 不触发 alert() 函数

Question

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

$(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，您的问题很可能是您需要使用事件委托(delegate)

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

此外 ID 不应该重复，所以将它们改为类

尝试

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