Question

我正在使用jQuery在单击某个“ tr”时执行一些操作，但是在该对象中，我希望jQuery忽略包含URL的子项td之一。任何想法该怎么做？ / p>

<tr class="parent_report>
 <tr class="child1">Some text</tr>
 <tr class="child2">Some text</tr>
 <tr class="child3"><span><a href="./">Some text</a></span></tr>
</tr>

还有jQuery：

$(".special_report, .new_report ,.parent_report").not("span").click(function(event){
  event.preventDefault();    
 //do some action

因此，当我单击child3中的链接并且不执行配置为jQuery的操作时，我想忽略jQuery

有什么想法吗？

谢谢

Answer 1

您说的是，所选的任何类别都不能是跨度。你不是说点击了什么。

因此，您需要在点击操作中检查该操作是否不是锚点

$("tr").on("click", function (evt) {
  if ($(evt.target).closest("a").length) {
    return true
  } else {
    console.log("tr was clicked");
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>foo</td>
      <td>bar</td>
      <td>baz</td>
      <td class="child3"><span><a href="./">Some text</a></span></td>
    </tr>
  </tbody>
</table>

如果您不想点击td，则只需忽略对该td的点击

$("tr").on("click", "td:not(:has(a))", function(evt) {
  console.log("tr was clicked");
})

td {
  padding: 1em;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>foo</td>
      <td>bar</td>
      <td>baz</td>
      <td class="child3"><span><a href="./">Some text</a></span></td>
    </tr>
  </tbody>
</table>

Answer 2

我会将您的点击事件移至表格单元格，以获取更直观的代码。

$("td").not(':has("a")').click(function () {
    console.log("tr was clicked");
});

<style>
td {
    padding: 10px;
    background: pink;
}
a {
    background: lightgreen;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>foo</td>
      <td>bar</td>
      <td>baz</td>
      <td class="child3"><span><a href="javascript:void(0)">Some text</a></span></td>
    </tr>
  </tbody>
</table>

如何选择不包含锚点的元素？

2 个答案: