Javascript 如何检测DataTable子行中的按钮单击事件？

我有标准的DataTable代码，它填充DataTable并在单击行时显示子行。 在子行内（使用format函数），我添加了一个按钮，我想在单击该按钮时执行一些操作，但每次单击该按钮（数据表包含新tr->td中的子行）时，将触发用于打开/关闭子行的td click事件，我得到

“未捕获类型错误：无法读取未定义的属性“0”

用于格式化函数中的

d[]

数组

这是打开/关闭子行的代码：

$('tbody').on('click', 'td', function() {
    var tr = $(this).closest('tr');
    id = $(this).closest('table').attr('id');
    table = $('#' + id).DataTable();
    var row = table.row(tr);
    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    } else {
        // Open this row
        row.child(format(row.data(), id)).show();
        tr.addClass('shown');
    }
});

function format(d, id) {
// `d` is the original data object for the row
if(sessionStorage['name']!=undefined)
    return '<img src="images/photo.jpg" id="photo" />' + '<p>Session created by:' + d[0] + '</p>' + '<p>Start Date:' + d.start_date + '</p>' + '<p>Extra info:' + d[3] + '</p>' + "<button class='btn btn-default' id='joinbutton' role='button'>Join Session</button>";
else
return '<div>' + '<img src="images/photo.jpg" id="photo" />' + '<p>Session created by:' + d[0] + '</p>' + '<p>Start Date:' + d.start_date + '</p>' + '<p>Extra info:' + d[3] + '</p>' + '</div>';

}

$（'tbody'）。在（'click'，'td'，function（）上{
var tr=$（this.nexist（'tr'）；
id=$（this）.closest（'table'）.attr（'id'）；
table=$（'#'+id）.DataTable（）；
var行=表.行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}否则{
//打开这一排
row.child（格式（row.data（），id））.show（）；
tr.addClass（“显示”）；
}
});
函数格式（d，id）{
//`d`是该行的原始数据对象
if（sessionStorage['name']！=未定义）
返回由以下人员创建的“+”会话：“+d[0]+”
“+”开始日期：“+d.Start_Date+”
“+”额外信息：“+d[3]+”
“+”加入会话；
其他的
返回由以下人员创建的“+”+”会话：“+d[0]+”
“+”开始日期：“+d.Start_Date+”
“+”额外信息：“+d[3]+”
“+”；
}

有没有办法防止为子行触发td

click

事件，或者以某种方式检测按钮单击？

---

谢谢

解决方案

将click处理程序添加到按钮并从处理程序返回

false

，以防止默认操作并停止事件传播到父元素。或者你也可以打电话和我联系

$（'example tbody'）。在（'click'，'button'，函数（e）上{
//…跳过。。。
返回false；
});

最好删除

id='joinbutton'

并改用类名，例如

btn join

。然后，您将能够使用下面的代码针对特定的按钮

$（'example tbody'）。在（'click'，'btn join'，函数（e）上{
//…跳过。。。
返回false；
});

演示

---

有关代码和演示，请参见。

我建议在我的注释后使用代码段（请参见注释，而不是format函数中的注释，它们是我运行代码段所必需的）：

函数格式（d，id）{
//`d`是该行的原始数据对象
//if（sessionStorage['name']！=未定义）
返回由以下人员创建的“+”会话：“+d[0]+”
“+”开始日期：“+d.Start_Date+”
“+”额外信息：“+d[3]+”
“+”加入会话；
//否则
//返回由以下人员创建的“+”+”会话：“+d[0]+”
“+”开始日期：“+d.Start_Date+”
“+”额外信息：“+d[3]+”
“+”；
}
//要处理动态创建的joinbutton，您需要：
//避免对多个元素使用同一ID
$（文档）。在（'click'，'button[role=“button”]”上，函数（e）{
警报（“这是按钮”）；
});
$（函数（）{
$（'tbody'）。在（'click'，'td'，函数（e）上{
//要避免收到按钮，请在td内单击您需要的：
如果（$（e.target）.is（':not（td）'））{
警报（“这在td内”）；
返回；
}
var tr=$（this.nexist（'tr'）；
id=$（this）.closest（'table'）.attr（'id'）；
table=$（'#'+id）.DataTable（）；
var行=表.行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}否则{
//打开这一排
row.child（格式（row.data（），id））.show（）；
tr.addClass（“显示”）；
}
});
});
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
}
th，td{
填充：10px；
}

月
储蓄
总和
$180
一月
$100
二月
$80
我用@gaemaf解决方案解决了我的问题：

// Handle click on checkbox
$("#example tbody").on("click", 'input[type="checkbox"]', function(e){
    var $row = $(this).closest("tr");

    if(this.checked){
        $row.addClass("active");
    } else {
        $row.removeClass("active");
    }

    // Prevent click event from propagating to parent
    e.stopPropagation();
});

// Handle click on table cells
$("#example tbody").on("click", "td", function(e){
    // Begin Solution
    if ($(e.target).is(':not(td)')) {
        return;
    }
    // End solution
    $(this).parent().find('input[type="checkbox"]').trigger("click");
});

您可以将事件添加到函数$（'tbody'）。在（'click'，'td'，函数（e）{因此，您可以测试e.target元素，如果它不是正确的元素，您可以停止函数，或者您可以处理事件stoppropagation太复杂，无法使两个函数都位于同一个函数中。我将按钮从表中拖到td中。感谢您的帮助，我稍后可能会返回您的答案，如果您能提供完整的e例如使用JSFIDLE，这将更容易理解确切的问题；内部按钮单击事件。返回false不会阻止事件冒泡。请参阅下面的简单示例@NitinGarg，查看演示，其中按钮的单击事件不会导致调用其他处理程序。亲爱的，请给我几分钟时间分析演示。@NitinGarg，您的语句不是true。jQuery事件处理程序不同从通过
onclick
属性附加的处理程序中，请参阅：从事件处理程序返回false将自动调用
event.stopPropagation（）
和
event.preventDefault（）
。