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

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

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

<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>

虽然只有在动态生成元素时才需要事件委托,但其他方式直接绑定处理程序.

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

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

<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>

为避免选择嵌套li使用直接子选择器(>).

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

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

<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>