CODEWITHSUNDEEP
javascriptjqueryonclickhtml-lists
D Aon
D Aon

Reputation: 143

How to prevent click event triggering for last li?

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

I need to prevent click event for last li element. I tried like below,

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

But this is not working. Post your answers if came across the same.

Thanks in advance !!!

Upvotes: 1

Views: 1104

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115222

It should be :last-child instead of last-child in the selector string.

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

Although event-delegation is only necessary if the elements are dynamically generated other ways bind handler directly.

$("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>

To avoid selecting nested li use direct child selector(>).

$("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>

Upvotes: 5

Bharat
Bharat

Reputation: 2464

You can also achieve this by 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>

Upvotes: 1

Related Questions