标题中的 JQuery DataTables 和 onClick 图像

Question

我在使用 JQuery 数据表的表的标题内有一个问号。我尝试禁用排序（这并不理想），但我的图像不会触发 onclick 事件。

本质上是 DataTables 劫持了整个单元格。

有人知道如何让数据表在单元格内只使用文本或跨度，这样我的 onclick 事件仍然可以使用问号，还可以使用 DataTables 进行排序？

我在 html 头中有这个：

 $(function() {
    $('#dcsales').dataTable(
    {
    "aoColumns": [
    { "bSortable": false },
    null,
    { "bSortable": false },
    null,
    null,
    { "bSortable": false },
    { "bSortable": false }
    ]
    }
    );
});

我在表头中有这个：

<thead>
 <tr>
  <td><span id="qa_one"><img id="qa_one_t" src="img/question.png"/></span>Col 1</td>
<td> Col Two</td> ...
</tr>
</thead>

使用 firebug，我可以看到 DataTables 将一个类插入到 td.我想将生成的类插入到具有某个类的跨度中，所以我的标题单元格可能看起来像这样。

<td><span id="qa_one"><img id="qa_one_t" src="img/question.png"/></span><span class="datatables">Col 1</span></td>

我在他们的网站上阅读文档和论坛帖子，但找不到任何相关信息。

---

编辑

基于以下帖子 Jquery datatable with checkbox in header and in row:select all checkbox not working

这也让我想到了这个 http://datatables.net/usage/columns

我将 head 部分中的脚本更改为以下内容以及 html 中的所有内容：

$(function() {
    $('#dcsales').dataTable(
    {
    "aoColumns": [
    { "bSortable": false, "sTitle": "<span id='qa_one><img id='qa_one_t' src='img/question.png'/></span><span>Col One</span>", "mDataProp":null },
    null,
    { "bSortable": false },
    null,
    null,
    { "bSortable": false },
    { "bSortable": false }
    ]
    }
    );
});

虽然没有什么不同，html 标记是正确生成的，但是当我单击图像时，光标会单击整个单元格。

以下是更改后生成的标记的样子：

<td class="sorting_disabled" tabindex="0" rowspan="1" colspan="1" style="width: 142px;" aria-label="Col One">
<span id="qa_points">
<span>Type of Points</span>
</td>

Answer 1

我不确定这是否是您想要的，但您使用 this

示例 JS：

$(document).ready( function() {
  $('#example').dataTable( {
    // you can use another callback if you want
    "fnInitComplete": function(oSettings, json) {
      $("#qa_one_t").on('click',function(){
          alert('click fire on img !');
      });
    }
  });
});

注意

在您的 js 代码中：

[...]<span id='qa_one><img id='qa_one_t'[...]

缺少' 以获得：<span id='qa_one'>

它可以解决问题。对你有帮助吗？