jquery - 我想在单击行中的按钮时取消行上的事件处理程序

Question

我正在使用数据表并设置了一个事件处理程序，以便当单击一行时，它会打开另一个页面。但是，每一行都包含一个按钮，该按钮将打开一个模式对话框。我正在尝试在按钮上设置一个单击处理程序，以便在按下按钮时取消新页面事件并打开模式。这是我的代码:

$('#table_id tbody').on('click', 'tr', function() {
    var root = location.protocol + '//' + location.host;
    window.location.href = root+'/path';
});

$('#ModalBtn').click(function() {
    $("#table_id tbody").unbind();
});

更新: 这是脚本的其余部分。我认为问题的原因可能是数据表变量。如果我删除它，事件处理程序就会正常工作，就像 Amin 的演示一样:

var searchTable = $('#table_id').dataTable({
    "ajax": "array.php",
    "aoColumns": [ 
        null,
        null,
        null,
        null,
        {
            "mData": null,
            "bSortable": false,
            "mRender": function(data, type, full) {
                return '<button id="ModalBtn" class="btn" data-toggle="modal" data-target="#myModal">Add</button>';
            }
        }
    ]
} );

Answer 1

原因如下:元素 ID必须是唯一的。 $('#ModalBtn').click(function() { 仅将事件处理程序绑定(bind)到第一个“添加”按钮。

改变

return '<button id="ModalBtn" class="btn btn-inverse btn-xs" data-toggle="modal" data-target="#myModal">Add</button>';

至

return '<button class="ModalBtn btn btn-inverse btn-xs" data-toggle="modal" data-target="#myModal">Add</button>';

代码如下所示:

Updated fiddle .

var buttonClicked = false;

$('#table_id tbody').on('click', 'tr', function()
{
    if (!buttonClicked)
    {
        alert('tr clicked!');
    }
    else
    {
        buttonClicked = false; //it is important, do not omit this line
    }
});

$('.ModalBtn').click(function()
{
    alert('Button is clicked');
    buttonClicked = true;
});

更新。对于动态创建的按钮，可以使用委托(delegate)事件处理程序:

$('#table_id tbody').on('click', '.ModalBtn', function()
{
    alert('Button is clicked');
    buttonClicked = true;
});