Question

<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

我需要阻止最后一个li元素的click事件。我尝试过如下，

$(document).on("click", "ul li:not(last-child)", function (e) {
//do something
}

但这不起作用。发布您的答案，如果遇到相同的。

提前致谢!!!

Answer 1

选择器字符串中应该是:last-child而不是last-child。

$(document).on("click", "ul li:not(:last-child)", function (e) {
   //do something
})

＆＃13;

$(document).on("click", "ul li:not(:last-child)", function (e) {
console.log('clicked');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

＆＃13;

虽然只有在动态生成元素时才需要event-delegation，但其他方式直接绑定处理程序。

$("ul li:not(:last-child)").on("click", function (e) {
   //do something
})

＆＃13;

$("ul li:not(:last-child)").on("click", function(e) {
  console.log('clicked');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

＆＃13;

要避免选择嵌套li使用direct child selector(>)。

$("ul > li:not(:last-child)").on("click", function (e) {
   //do something
})

＆＃13;

$("ul > li:not(:last-child)").on("click", function (e) {
  console.log('clicked');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

＆＃13;

Answer 2

您也可以通过li:not(:last)

来实现这一目标

＆＃13;

$(document).on("click", "ul li:not(:last)", function (e) {
   alert()
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>

＆＃13;

如何防止最后一次li的点击事件触发？

2 个答案: