jQuery .on() tr 点击事件在 tr 复选框点击上使用 .not()？答案

【问题标题】：jQuery .on() tr click event using .not() on tr checkbox click?jQuery .on() tr 点击事件在 tr 复选框点击上使用 .not()？
【发布时间】：2014-10-21 07:48:45
【问题描述】：

所以我的标题可能令人困惑，但它有正确的细节。我有一个带有可点击行的表格。单击该行时，该行将突出显示。该表还有一个复选框列。 单击复选框不应突出显示或从行中删除突出显示。 如何在 .on('click', 'tr', function(){ 中正确使用 .not() 或 :not 。 .. }) ? http://jsfiddle.net/vmu0p2oe/

$('table').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                    //$(this).find(":checkbox").prop("checked", false);
                }
                else {
                    $('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                    //$(this).find(":checkbox").prop("checked", true);
                }

            });

【问题讨论】：

当你发现正是你试图解决的问题时，那美好的时刻。

标签： javascript jquery checkbox click live

【解决方案1】：

将此添加到处理程序的开头：

if($(e.target).is('input[type=checkbox]')) {
    return;
}

如果单击的元素是复选框，这将停止处理程序的运行。

小提琴：http://jsfiddle.net/vmu0p2oe/1/

【讨论】：

【解决方案2】：

为使用stopPropagation() 的复选框添加一个处理程序，以防止点击冒泡到tr：

$('table').on('click', ':checkbox', function(e) {
    e.stopPropagation();
});

DEMO

【讨论】：

【解决方案3】：

这个怎么样：

$('table').on('click', 'tr', function (e) {
  var el = e.target;
  if ( el.type !== "checkbox"){
    if ($(this).hasClass('selected')) {
         $(this).removeClass('selected');
         //$(this).find(":checkbox").prop("checked", false);
    } else {
         $('tr.selected').removeClass('selected');
         $(this).addClass('selected');
         //$(this).find(":checkbox").prop("checked", true);
    }
  }
});

fiddle

【讨论】：