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

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> 

Answer 2

您也可以通过li:not(:last)实现此目的

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

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