0

我正在使用 jQuery 的事件委托向表行添加点击事件。我在该行的第一个 td 中也有一个复选框。当我单击行中的任意位置时，一切都按预期工作。但是，当我单击复选框时，我不希望该事件起作用。我尝试使用 :not() 选择器，但也许我遗漏了一些东西，因为当我单击复选框时我仍在触发事件。


HTML

<tr>
    <td>
        <div class="myCheckbox"><input type="checkbox" name="userName" /></div>
    </td>
    <td><a href="/go/to/user/profile"></a></td>
    <td>more info</td>
    <td>more info</td>
    <td>more info</td>
</tr>

jQuery

$('table tr:not(':checkbox')').on('click', 'td', function(event) {

    // Do something
});



我可以得到帮助来解决我正在尝试做的事情吗？

4

2 回答 2

6

两个选项（都涉及tr:not从现有代码中删除内容，正如您所说的那样不起作用 -tr元素不能是复选框，并:not检查元素，而不是其内容）：

  1. 将事件处理程序添加到调用e.stopPropagation. 然后点击事件不会到达该行。您可以直接执行此操作，也可以通过委托执行此操作。这是一个直接的活生生的例子。如果您采用间接方式，请务必在label您打算支持的所有浏览器上测试单击激活复选框（如果您将拥有它们）的 s。

    或者

  2. 将此添加到您的处理程序：

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

    例如：

    $('table').on('click', 'td', function(event) {

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

    // Logic here
});

    这可以通过测试事件的来源来查看它是否是一个复选框，并尽早退出。

在这两种情况下，如果您使用 alabel来激活复选框，您可能需要对标签执行相同的操作。

我对#2 处理 s 的样子感到好奇label，结果证明它足以移动到函数中，但并不难&mdash 可能我会怎么做：Live example | 来源

jQuery(function($) {

  // The table cell click handler
  $("table").on("click", "td", function(e) {
    // Is the source a checkbox or the label for
    // one?
    if (isCheckbox($(e.target))) {
      return;
    }

    // Normal handling
    $(this).toggleClass("foo");
  });

  // Function to test whether the source is a
  // checkbox, or the label of a checkbox
  function isCheckbox($elm) {
    var chkid;

    if ($elm.is("input[type=checkbox]")) {
      return true;
    }
    if ($elm.is("label")) {
      chkid = $elm.attr("for");
      if (chkid) {
        return $("#" + chkid).is("input[type=checkbox]");
      }
      return !!$elm.find("input[type=checkbox]")[0];
    }
    return false;
  }

});
于 2012-07-26T21:22:20.903 回答
0

尝试使用 stopPropagation() 来防止事件冒泡。 

$('div.myCheckbox input[type=checkbox]').bind('change', function(e) {
  e.stopPropagation();

  //do stuff here
});
于 2012-07-26T21:24:15.890 回答