2

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

我创建了一个 --> fiddle <-- 来证明这一点。只需单击表格行，您就会看到一个按钮出现。然后点击按钮。您将看到在单击按钮时再次执行了行单击事件。我该如何防止这种情况？

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

3 回答 3

5

使用它来停止传播事件

       event.stopPropagation();

看这里链接

于 2013-01-05T12:05:28.773 回答
2

您只需return false;在click

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

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

于 2013-01-05T12:05:20.877 回答
0

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

因此，您的最终通话将如下所示：

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

我已将其插入到您的代码中，它按预期工作，从 TR 中删除了点击事件

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

我希望这对你有用。

于 2013-01-05T12:21:16.450 回答