Question

我在表行上有一个执行操作的click事件。但是，当我点击同一行上的按钮时，我想阻止行上点击事件，只需执行按钮操作，我不知道如何实现这一点。

我创建了一个 - ＆gt; fiddle＆lt; - 来证明这一点。只需单击表格行，您就会看到一个按钮出现。然后单击按钮。您将看到再次执行row-click-event，同时单击按钮。我该如何防止这种情况？

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

Answer 1

使用它来停止传播事件

       event.stopPropagation();

见link

Answer 2

您只需在return false;

中添加click即可

$(this).find(".my_btn").off('click').on('click', function () {
  alert("clicked");
  return false;
})

http://jsfiddle.net/VhYdD/4/

Answer 3

您应该从该按钮所在的TR中删除点击行为。您可以使用像$(this).closest('tr')这样的jQuery方法，我们可以通过DOM从按钮中搜索以找到TR，或者您可以在jQuery中使用父函数找到父级。一旦我们找到了我们正在寻找的元素（TR），我们就可以unbind点击它的功能。

所以你的最终电话会是这样的：

$(this).closest('tr').unbind('click');

我已将其插入到您的代码中，它按预期工作，从TR

中删除click事件

$(document).ready(function() {
    $('#tab_open_deals tbody tr').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>'
    });
  $(this).find(".my_btn").on('click', function(){
       $(this).closest('tr').unbind('click');
       alert("clicked") })
       $(this).find(".my_btn").show();
       row.insertAfter($(this));
    });
});

我希望这适合你。

单击上的按钮时如何抑制Click事件？

3 个答案: