按钮单击事件优先于行单击事件

时间:2014-07-24 09:58:00

标签: jquery html

我有两个相互矛盾的事件,我希望能够发挥作用。

我有一个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];
     });

如何点击按钮优先于行点击?

修改 按钮的单击事件仍然不会触发。可能是一种不同的方式来召集活动?以下是在HTML表格中保存按钮的单元格示例

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

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

4 个答案:

答案 0 :(得分:3)

您需要停止子元素事件的事件传播。使用方法:

 e.stopPropagation();

点击活动:

 $('#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

答案 1 :(得分:2)

您可以使用stopPropagation

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

答案 2 :(得分:2)

如果你的按钮超过行 - 你可以使用

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

答案 3 :(得分:1)

小修正使其适用于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;
 });