table 中的按钮在单击时同时触发按钮和 table 事件

Question

我有一个 table 显示某些组件的信息，在 table 的右侧，我有一个删除按钮。截至目前，我已经拥有它，所以当单击组件的行时，它会将您带到一个新页面。由于我的删除按钮也在该行上，因此单击时它会将我带到该页面而不是删除组件。有没有办法在单击时只触发按钮事件而不是 table 的行事件？这是我的 HTML 的样子：

{{#components}}
<tr class="component" data-id={{id}} data-type={{type}}>
        <td>{{general_name}}</td>
        <td>{{type}}</td>
        <td>
            <button class="btn btn-danger btn-xs glyphicon glyphicon-remove pull-right delete" id="remove" data-id={{id}} data-type={{type}}></button>
        </td>   
    </tr>
{{/components}}

这里是我拥有的 javascript 事件，应该将点击路由到正确的位置：

'click #remove' : 'deleteComponent',
'click .component': 'openComponent',

我试过在我的按钮上使用 jQuery 的 removeClass("component") 但这似乎不起作用。有什么想法吗？

Answer 1

event.stopImmediatePropagation()

停止事件传播。将以上行放在您的 deletecomponent（删除事件）方法中。

Answer 2

您可以在单击按钮时停止 event propagation，方法如下：

$('button').click(function(event) {
  event.stopPropagation();
  //set up your normal button code here...
});

table 中的按钮在单击时同时触发按钮和 table 事件

Button in table fires both button and table event when clicked

javascript

jquery

html

mustache