具有特定前缀的<a>上的jquery ()事件不触发告警()函数

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>

​

出于某种原因，在这里的片段中，它的工作非常完美。但是，在我的浏览器(火狐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

致

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

溶液

您需要通过在关于()调用中将选择器作为第二个参数来使用事件委托，请参见下面的示例：

$(document).ready(function() {

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

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

来自jQuery 关于()方法文档：

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

有关更多信息，请参阅jQuery 关于()方法文档和jQuery DataTables -为什么单击事件处理程序不能工作中的“直接和委托事件”。

有关代码和演示，请参见这个jsFiddle。

Answer 2

由于dataTables插件在页面中操作html，您可能需要使用事件委托。

当元素从页面中移除并替换为相同的html....any事件时，附加的侦听器将丢失。

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

试一试

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