jQueryクリックイベントがDatatablesで動作しない

Question

ちょっと、私は修正方法を見つけることができないという独特の問題があります。私はあなたが現在、その行を削除するユーザーのためのために、上記の画像の中に見える赤いゴミ箱を追加しました

：

これが私のデータテーブルは次のようになります。

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」私は、DataTableのcreatedRow以内にそれを注入することによって、このゴミ箱を追加しますは、行に表示されるゴミ箱イメージです。あなたが見る通り、私はtrashcanHoverをゴミ箱のクリックイベントでtrueに設定していますが、のようにはありません。をデータセットにクリックすると、console.logというメッセージが表示されます。

ゴミ箱をクリックするために私が持っているjQueryのコードはこれです：

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

そして、これは、DataTableの行の任意の部分をクリックするための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のクリック行機能を起動し、私はの2つを区別するための方法を見つけることができませんIFよりも行うには。

上記のコードは、ヘッダーだけがクリックされているかどうかを確認する機能があります。ヘッダーがクリックされている場合は、その行のデータを編集しないでください。私はゴミ箱をクリックしたときにその行が、を削除しないものの

は現在も、単に削除されたその行の編集を開きます。

Louysパトリス・ベセットため

常に最初のDataTableのクリックイベントを後藤...

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

---

EDIT

を大丈夫...さんはその後、何か他のものを試してみましょう。

trハンドラでは、追加：

は

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