如何抑制< tr>上的Click事件当点击< tr>上的按钮时? [英] How to suppress Click event on <tr> when clicking on the button on the <tr>?

问题描述

我在执行操作的表行上有一个click事件.但是，当我单击同一行上的按钮时，我想阻止行上单击事件，只是执行按钮所要做的事情，而我不知道该如何实现.

I have a click event on the table row that executes an action. However when I click on the button on the same row, I would like to prevent the on-row-click event and simply do what the button does, and I don't know how to achieve this.

我创建了-> 小提琴<-进行演示.只需单击表格行，您就会看到一个按钮出现.然后点击按钮.您将看到单击按钮时再次执行了行单击事件.我该如何预防?

I have created a --> fiddle <-- to demonstrate this. Simply click on a table row and you see a button appearing. Then click on the button. You will see that the row-click-event executed again, while clicking on the button. How do I prevent this?

 <table id="tab_open_deals" class="table table-condensed table-striped cb_table-hover">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody id="search_result">
    <tr>
      <td><a class="btn my_btn hidden2" href="#">Button</a></td>
      <td>39.90</td>
      <td>29 Dec 2012</td>
    </tr>
  <tr>
    <td><a class="btn my_btn hidden2" href="#">Button</a></td>
    <td>1499.00</td>
    <td>8 Jan 2013</td>
  </tr>
 </tbody>
</table>

CSS:

.hidden2{
    display: none;
}

jquery:

$(document).ready(function() {
    $('#tab_open_deals tbody tr').off('click').on('click', function() {
        var row = $('<tr/>');
        row.load('/echo/html/', {
            html: '<td class="override" colspan="4"><table class="table-striped sub_table-hover"><thead><tr><th>Sub1</th><th>Sub2</th></tr></thead><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></td>'
        });

        row.insertAfter($(this));
      $(this).find(".my_btn").off('click').on('click', function(){ alert("clicked") })
        $(this).find(".my_btn").show();
    });
});

推荐答案

使用它来停止传播事件

       event.stopPropagation();

请参见链接

这篇关于如何抑制&lt; tr&gt;上的Click事件当点击&lt; tr&gt;上的按钮时?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！