jQuery - Passing an object to the click handler

Question

for(let feature of features){
   $("#menuList").append("<li></li>");
}
$("#menuList li").on('click', function(ev){ 
  // I need a reference to the original feature object here 
});

What is the best way to get a reference to the original feature-object within the click handler (without passing some ID as a data tag and iterating over the list again)?

Ideally, I could do something like

for(let feature of features){
   $("#menuList").append("<li></li>").on('click', function(feature){ //do something with the feature object });
}

But this does not work.

Did you try using $(document).on('click', "#menuList li", function(ev){ ... because your element is appended — Armin
– Armin, Commented Feb 15, 2017 at 12:58
What actually is feature or features here? Are you appending anything to li from it? — Guruprasad J Rao
– Guruprasad J Rao, Commented Feb 15, 2017 at 13:01
feature is just an object. I will definitely use some of it's attributes to build the li but I really need to pass the object to the click handler, that's the problem — netik
– netik, Commented Feb 15, 2017 at 13:02
Take a look here: stackoverflow.com/questions/2159368/… $.appendTo looks to be another function that will return a reference to the just appended element (not a ref to the parent element like $.append() does), and you'll be able to set that .on('click' directly, I suppose. — artur99
– artur99, Commented Feb 15, 2017 at 13:03

Guruprasad J Rao · Accepted Answer · 2017-02-15 13:22:46Z

3

Since you are adding the li elements dynamically, you need to perform event delegation i.e. attaching click event on existing element, say #menuList here and through it navigate to clicked li and with $(this) you can get reference to clicked element through which you can get its index and get your original object from features as below:

$("#menuList").on('click','li', function(ev){ 
  var currentIndex=$(this).index();
  var feature=features[currentIndex]; //your required object from features object
});

Assuming that menuList will have fresh li appended each time.

edited Feb 15, 2017 at 13:22

answered Feb 15, 2017 at 13:04

Guruprasad J Rao

29.7k16 gold badges113 silver badges212 bronze badges

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

Comments

Sami · Accepted Answer · 2017-02-15 13:04:59Z

1

You can access the event raising object with $(this) within the handler.

answered Feb 15, 2017 at 13:04

Sami

2,1201 gold badge15 silver badges27 bronze badges

Comments

Satpal · Accepted Answer · 2017-02-15 13:06:40Z

1

You can persist feature with element using $.fn.data() which can be retrieved later in the event handler.

for (let feature of features) {
  var li = $("<li></li>");
  li.data('feature', feature);
  $("#menuList").append(li);
}
$("#menuList").on('click', 'li', function(ev) {
  var feature = $(event.target).data('feature');
});

answered Feb 15, 2017 at 13:06

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

caramba · Accepted Answer · 2017-02-15 13:15:06Z

1

just use $(this)

Something like:

$('#menuList').on('click', 'li', function(ev){ 
  $(this).toggleClass('xxx');
  //console.log($(this));
});

li.xxx {
  background-color: orange;
}

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

<ul id="menuList">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>five</li>
</ul>

edited Feb 15, 2017 at 13:15

answered Feb 15, 2017 at 13:01

caramba

22.5k20 gold badges94 silver badges134 bronze badges

Collectives™ on Stack Overflow

jQuery - Passing an object to the click handler

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related