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

更新：这是脚本的其余部分。我想也许麻烦的原因是datatables var。如果我删除它，事件处理程序可以正常工作，就像在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() {仅将事件处理程序绑定到第一个＆＃34;添加＆＃34;按钮。

更改

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

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

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

Answer 2

也许我误解了，但你不是在这里过于复杂吗？据我所知，你只想在行/ <tr>上点击一下，并希望在点击按钮时打开一个弹出窗口（也许是bootstrap？）。但不是两个在同一时间。简单地说：

$('#table_id tbody').on('click', 'tr', function(e) {
    if (e.target.id === 'ModalBtn') {
        return;
    }
    alert('<tr> clicked');
});

然后跳过所有其他的。这是一个完整的示例，正如您所希望的那样，通过<tr>点击事件和引导模式实际显示，当您点击add - 按钮 - ＆gt;的 http://jsfiddle.net/45tf0095/

正如@Regent所提到的，重复的id是非常糟糕的做法。但这不是你遇到问题所描述问题的原因，而是另一回事。如果您想将代码更新为日常标准，请在e.target.className上测试匹配，并跳过按钮id。

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

2 个答案: