Question

I'm trying to set up a function that will listen for when an <a> tag that has an id value with a certain prefix and then do something. Here's what I have:

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

For some reason, in the snippet here, it works perfectly as expected. However, in my browser (both Firefox 43.0.3 and Chrome 47.0.2526.111), there is no response. I know it's bad form to ask a question about an issue that isn't reproducible, but I'm hoping someone knows what might be preventing this function from running. There are no errors and all of my other javascript/jquery functions run. Even reducing my jquery function $("a").click(function()...) doesn't work. It just seems like it's not recognizing the fact that a link is being clicked.

Any help would be appreciated.

Update

I've been doing various things trying to figure out why JQuery isn't triggering the alert when the link is clicked, but it seems that JQuery can't really interact with the DataTable at all. The following code had no effect on the table.

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

And the following code produces an object of length 0:

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

I'm at a total loss as to why JQuery is having such a hard time interacting with the 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()方法文档：

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。

参见＆＃34;直接和委派活动＆＃34;在jQuery on()方法文档和jQuery DataTables – Why click event handler does not work中获取更多信息。

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

<a> with id having certain prefix not firing the alert() function

Update

2 个答案: