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。

上面的代码可以检查是否只是单击了标题，如果是，则不要编辑该行的数据。

目前，当我点击垃圾桶时，会删除该行，但也会打开刚删除的该行的编辑。

Louys Patrice Bessette的

似乎总是首先转到数据表的点击事件......

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...

点击事件的jQuery点击事件不适用于数据表

1 个答案: