jQuery click click事件不適用於數據表

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到真正的垃圾桶點擊事件，但似乎並不足夠快時，我CONSOLE.LOG說出來的數據表點擊，甚至通過 -它總是說假的。

我要單擊垃圾箱的jQuery代碼是這樣的：

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

這是單擊datatables行的任何部分的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]);
            }
        }
    }
});

現在，如果我注釋掉其中一個單擊函數，則它將執行應做的事情（打開數據以編輯或刪除該行）。 我遇到的問題是，它從未完全看到垃圾桶的單擊（即使我用鼠標單擊了它）。 它只是觸發了datatables click row函數，我找不到一種方法來區分兩者以進行IF THAN。

上面的代碼確實可以檢查是否僅單擊了標題，如果不單擊，則不要編輯該行的數據。

目前，雖然當我單擊垃圾箱時，它確實刪除了該行，但也打開了剛刪除的那一行的編輯 。

適用於Louys Patrice Bessette

似乎總是總是先進入數據表的click事件...

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