按鈕點擊事件優先於行點擊事件

我有一個HTML表格。表中的第一列是一個按鈕。這將打開n個細節窗口。

我使用這些點擊事件。

這是一個允許多行選擇，如果你想刪除記錄。

$("#vidlib_dtable tbody").on('click', 'tr', function() { 
     $(this).toggleClass('selected'); 
    });

和此事件是拿起點擊按鈕，使您可以編輯的記錄（打開編輯窗口）

 $('#vidlib_dtable input[type="button"]').click(function() { 
      var dtab = $('#vidlib_dtable').dataTable(); 
      var position = dtab.fnGetPosition(this); 
      var contactId = dtab.fnGetData(position)[9]; 
    });

我如何獲得按鈕點擊優先於行點擊？

編輯該按鈕的click事件仍不會觸發。可能以不同的方式來稱呼事件？這裏是保存在HTML表格

<td class="sorting_1 MMcol1"> 
    <div class="col1d"> 
     <button class="editBut"><img src="img/spanner.png"></button> 
    </div> 
</td>

SOLUTION

$("#vidlib_dtable").on('click', 'tr', function() { 
    $(this).toggleClass('selected'); 
}); 

$('#vidlib_dtable').on('click','.editBut',function(e) { 
    e.stopPropagation(); /* <----- Put this before other steps */ 
    var dtab = $('#vidlib_dtable').dataTable(); 
    var position = dtab.fnGetPosition(this); 
    var contactId = dtab.fnGetData(position)[9]; 
});

來源

2014-07-24 morne

你需要停止對兒童元素事件事件傳播的按鈕，電池的例子。使用方法：

e.stopPropagation();

Click事件：

$('#vidlib_dtable').on('click','.editBut',function(e) { 
     var dtab = $('#vidlib_dtable').dataTable(); 
     var position = dtab.fnGetPosition(this); 
     var contactId = dtab.fnGetData(position)[9]; 
     e.stopPropagation(); 
});

Demo

來源

2014-07-24 09:59:29

好吧，我相信答案應該是這樣，因爲有3分相同的，但Click事件該按鈕仍然不起作用。我將在上面的代碼中追加一個表格的例子。非常感謝我的朋友 – morne

我相信你也必須動態地添加按鈕（就像你使用事件代理進行行點擊一樣）。您需要以相同的方式處理按鈕的點擊事件。即使用事件委託來綁定點擊。查看更新的代碼。 –

。謝謝。如果你看看上面的表格單元片段。（''click'，'input [type =「button」]'，function（e）{'但它仍然忽略了按鈕事件並進行了行事件 – morne

您可以使用：

$('#vidlib_dtable input[type="button"]').click(function(e) { 
      var dtab = $('#vidlib_dtable').dataTable(); 
      var position = dtab.fnGetPosition(this); 
      var contactId = dtab.fnGetData(position)[9]; 
      e.stopPropagation(); 
    });

來源

2014-07-24 09:59:51

如果您在排按鈕 - 您可以使用

$('#vidlib_dtable input[type="button"]').click(function(e) { 
      var dtab = $('#vidlib_dtable').dataTable(); 
      var position = dtab.fnGetPosition(this); 
      var contactId = dtab.fnGetData(position)[9]; 
      e.stopPropagation(); 
    });

來源

2014-07-24 10:00:48 SlyBeaver

小的修正，使其在IE瀏覽器也

以下用途：

$('#vidlib_dtable input[type="button"]').click(function(e) { 
     var dtab = $('#vidlib_dtable').dataTable(); 
     var position = dtab.fnGetPosition(this); 
     var contactId = dtab.fnGetData(position)[9]; 
     e = e||event;/* get IE event (not passed) */ 
     e.stopPropagation? e.stopPropagation() : e.cancelBubble = true; 
});

來源

2014-07-24 10:09:59

按鈕點擊事件優先於行點擊事件

回答

相關問題