jQuery clicking click event not working on Datatables

Question

Hey all I have a unique issue that I can not seem to find a way to fixing.

This is what my data table looks like:

I've added the red trashcan that you currently see in the image above in order for the user to delete that row. I add this trashcan by injecting it within the datatables 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>');
},

And after all that's said and done with the injections the HTML code looks like:

<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" is the trashcan image you see in the rows. As you see I am setting trashcanHover to true on the trashcan click event but that doesn't seem to pass fast enough to the datatables click even when I console.log that out - it always says false.

The jQuery code I have for clicking on the trashcan is this:

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

And this is the jQuery code for the clicking of any part of the datatables row:

$(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]);
            }
        }
    }
});

Now if I comment out either one of those click functions then it does what it should do (either open data to edit or delete that row). What I am having issues with is that it never fully sees the trashcan click (even though I click on it with the mouse). It just fires off the datatables click row function and I can not find a way to distinguish between the two of them in order to do an IF THAN.

The code above does work with checking if just the headers were clicked on and if so, don't edit that row's data.

Currently though when I click on the trashcan it does delete that row but also opens the edit for that row that just got deleted.

for Louys Patrice Bessette

Seems to always goto the datatable's click event first...

Answer 1

Use a class to target elements that are created via a loop.
Because an id must be unique.

I assume this is an immediate delete row function...
So this should work:

$(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]);
});

---

EDIT

okay... Let's try something else then.

In the tr handler, add:

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