jQuery单击单击事件不适用于数据表

Question

大家好，我有一个独特的问题，我似乎无法找到解决方法。

这是我的数据表的样子：

我添加了您当前在上图中看到的红色垃圾桶，以便用户删除该行。我通过在数据表 createdRow 中注入这个垃圾桶来添加它：

fnRowCallback: function (nRow, aData, iDisplayIndex) {
   $(nRow).find('#trashIcon').attr({ 'data-indexer': (iDisplayIndex + 1) });
   $(nRow).find('#trashIcon').attr({ 'data-table': 1 });
},
createdRow: function (row, data, dataIndex) {    
   $(row).prepend('<i id="trashIcon" ' +
           'data-eventid="' + data.RequestID + '" ' +
                  'class="fa fa-trash-o fa-lg grow-1" ' +
            'aria-hidden="true" ' +
                  'style="color: rgba(169, 68, 66, 1); ' +
                         'left: 3px; top: 10px; ' +
                         'position: relative; ' +
                         'z-index: 500; ' +
                         'box-shadow: 0px 2px 2px rgba(150,150,150,0.3);">' +
                  '</i>');
},

在所有这些都说完注入之后，HTML 代码看起来像：

<table width="100%" 
       class="display cell-border dataTable no-footer" 
       id="theDT2" 
       role="grid" 
       aria-describedby="theDT2_info" 
       style="width: 100%;" 
       cellspacing="0">
<thead>
    [HEADER CODE HERE...]
</thead>
<tbody>
    <tr class="odd" role="row">
        <i class="fa fa-trash-o fa-lg grow-1" 
           id="trashIcon" 
           aria-hidden="true" 
           style="left: 3px; 
                               top: 10px; 
                             color: rgba(169, 68, 66, 1); 
                          position: relative; 
                        box-shadow: 0px 2px 2px rgba(150,150,150,0.3);" 
           data-eventid="976" 
           data-indexer="1" 
           data-table="2">
        </i>
        <td class="sorting_1">976</td>
        [TABLE CODE HERE]
    </tr>
</table>

id="trashIcon" 是您在行中看到的垃圾桶图像。如您所见，我在垃圾箱点击事件上将 trashcanHover 设置为 true，但即使我 控制台，这似乎也没有 足够快 传递给数据表点击。记录 - 它总是说错。

点击垃圾桶的 jQuery 代码是这样的：

$(document).on('click', '#trashIcon', function (e) {
    e.preventDefault();
    trashcanHover = true;
});

这是点击数据表行任意部分的 jQuery 代码：

$(document.body).on('click', 'tr', function (e) {
    //Listens for the user to click on a data row in the table
    if (typeof $(this).attr('class') != 'undefined') {
        var tblName = $(this).closest('table').attr("ID");
        var headerClick = $(this).attr("aria-controls");

        console.log(trashcanHover);

        if (typeof $(this).attr('class') != 'undefined') {
            if (tblName == "theDT") {
                edit_person(theTable.row(this).data().RequestID);
            } else {
                edit_event(theTable2.row(this).data().EventID);
            }
        } else {
            if ($(this).data('table') == 1) {
                $('#theDT').dataTable().fnDeleteRow($(this).closest('tr')[0]);
            } else {
                $('#theDT2').dataTable().fnDeleteRow($(this).closest('tr')[0]);
            }
        }
    }
});

现在，如果我注释掉其中任何一个点击功能，它就会执行它应该做的事情（打开数据以编辑或删除该行）。我遇到的问题是它永远不会完全看到垃圾桶点击（即使我用鼠标点击它）。它只是触发数据表单击行功能，我无法找到一种方法来区分它们两者以执行 IF THAN。

上面的代码确实可以检查是否只点击了标题，如果是这样，请不要编辑该行的数据。

目前，虽然当我点击垃圾桶时，它确实会删除该行，但也会打开刚刚删除的那一行的编辑。

劳伊斯·帕特里斯·贝塞特

似乎总是先进入数据表的点击事件...

Answer 1

使用class 来定位通过循环创建的元素。
因为id 必须是唯一的。

我假设这是一个立即删除行功能...
所以这应该有效：

$(document).on('click', '.fa-trash-o', function (e) {
    // To stop the click propagation up to the `tr` handler
    e.stopPropagation();

    // Delete the row.
    $('#theDT2').dataTable().fnDeleteRow($(this).closest('tr')[0]);
});

---

编辑

好吧……那我们试试别的吧。

在tr 处理程序中，添加：

$(document.body).on('click', 'tr', function (e) {
    if(e.target.className.split(" ")[1]=="fa-trash-o"){
        return;
    }
    // rest of your code...