Detect list item index with custom list made of buttons

Question

Given a dynamically built list such as :

<ul id="shortcuts">
  <li><input type="checkbox" value="false"/><button>foo</button><button>-</button></li>
  <li><input type="checkbox" value="false"/><button>foo</button><button>-</button></li>
  <!-- possibly many others lis -->
</ul>

So in order to use only one click event listener, I am trying to attach click event to the list and get the list item index that initially spread the event. Any of my attempts succeed so far.

I can get something out of this :

$("#shorcuts").click ( function(evt) {
   alert( evt.target );
});

But I can't get to the "li" html element nor its "index" within the list. Any idea what I am doing wrong ?

Bhushan Kawadkar · Accepted Answer · 2015-07-28 06:51:05Z

0

You need to attache event to li like below

$(function(){
  $('#shortcuts').on('click','li',function(){
    alert($(this).index());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="shortcuts">
  <li><input type="checkbox" value="false"/><button>foo</button><button>-</button></li>
  <li><input type="checkbox" value="false"/><button>foo</button><button>-</button></li>
  <!-- possibly many others lis -->
</ul>

Here click event will delegate to all lis inside shortcuts and you can get the index of clicked li using .index()

answered Jul 28, 2015 at 6:51

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sanjeev shetty · Accepted Answer · 2015-07-28 07:29:03Z

0

$(document).ready(function(){
  $(document).on('click','#shortcuts li',function(e){
    e.preventDefault();
    alert($(this).text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="shortcuts">
  <li><input type="checkbox" value="false"/><button>foo1</button><button>-</button></li>
  <li><input type="checkbox" value="false"/><button>foo2</button><button>-</button></li>
  <!-- possibly many others lis -->
</ul>

answered Jul 28, 2015 at 7:29

sanjeev shetty

4584 silver badges17 bronze badges

2 Comments

Loic Over a year ago

Thanks for your answers. ….index() seems to always return 0. on(…) doesn't seem to throw the alert.

sanjeev shetty Over a year ago

on() doesn't seem to throw the alert?

Community · Accepted Answer · 2017-05-23 12:30:11Z

0

You can get index with JQuery - index function.

$('selector').click(function (event) {
    alert($(this).index());
});

DEMO

OR

$("#shorcuts").on("click","li", function(evt) {
    alert($(this).index());
}

Look at here for more options SO - Source

event-binding-on-dynamically-created-elements

bind-click-event-on-dynamically-created-elements

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Jul 28, 2015 at 6:58

SK.

4,3885 gold badges33 silver badges51 bronze badges

3 Comments

Loic Over a year ago

Looks like it's working if the list items are previously created. If they are later added, the event listener is not active for these new elements.

SK. Over a year ago

@Loic You have to attach click event dynamically when you are creating elements. I have added links to the answer. Have a look.

Loic Over a year ago

Thanks a lot Mike. Still can't get to work but the links are instructive.

Collectives™ on Stack Overflow

Detect list item index with custom list made of buttons

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related