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

Question

我的标题可能有些混淆，但它有正确的细节。我有一个带有可点击行的表格。当单击行时，该行会高亮显示。该表还具有复选框列。单击复选框不应突出显示或取消突出显示行。我如何在.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);
                }

            });

- triplethreat77

---

当你找到恰好你想要解决的问题时，那一刻真是太美妙了。 - Captain Hypertext

Answer 1

将以下内容添加到处理程序的开头：

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

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

Fiddle: http://jsfiddle.net/vmu0p2oe/1/

- tcooc

Answer 2

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

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

演示

- Barmar

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

小提琴

- Gary Storey