title: jQuery clicking click event not working on Datatables
body: <p>Hey all I have a unique issue that I can not seem to find a way to fixing. </p>
  
  <p>This is what my data table looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/Zx6KF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zx6KF.png" alt="enter image description here"></a><a href="https://i.stack.imgur.com/MJTZV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MJTZV.png" alt="enter image description here"></a></p>
  
  <p>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 <strong>createdRow</strong>:</p>
  
  <pre><code>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('&lt;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);"&gt;' +
                    '&lt;/i&gt;');
  },
  </code></pre>
  
  <p>And after all that's said and done with the injections the HTML code looks like:</p>
  
  <pre><code>&lt;table width="100%" 
         class="display cell-border dataTable no-footer" 
         id="theDT2" 
         role="grid" 
         aria-describedby="theDT2_info" 
         style="width: 100%;" 
         cellspacing="0"&gt;
  &lt;thead&gt;
      [HEADER CODE HERE...]
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr class="odd" role="row"&gt;
          &lt;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"&gt;
          &lt;/i&gt;
          &lt;td class="sorting_1"&gt;976&lt;/td&gt;
          [TABLE CODE HERE]
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>id="trashIcon"</strong> is the trashcan image you see in the rows. As you see I am setting <strong>trashcanHover</strong> to true on the trashcan click event but that doesn't seem to <strong>pass fast enough</strong> to the datatables click even when I <strong>console.log</strong> that out - it always says false.</p>
  
  <p>The jQuery code I have for clicking on the trashcan is this:</p>
  
  <pre><code>$(document).on('click', '#trashIcon', function (e) {
      e.preventDefault();
      trashcanHover = true;
  });
  </code></pre>
  
  <p>And this is the jQuery code for the clicking of any part of the datatables row:</p>
  
  <pre><code>$(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]);
              }
          }
      }
  });
  </code></pre>
  
  <p>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 <strong>distinguish between the two of them</strong> in order to do an IF THAN.</p>
  
  <p>The code above does work with checking if just the headers were clicked on and if so, don't edit that row's data. </p>
  
  <p>Currently though when I click on the trashcan it <strong>does delete</strong> that row but <strong>also opens the edit</strong> for that row that just got deleted.</p>
  
  <p><strong>for Louys Patrice Bessette</strong></p>
  
  <p><a href="https://i.stack.imgur.com/A5jx2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A5jx2.png" alt="enter image description here"></a></p>
  
  <p>Seems to always goto the datatable's click event first...</p>