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, Feb 15 '17 at 12:58
What actually is `feature` or `features` here? Are you appending anything to `li` from it? — Guruprasad J Rao, Feb 15 '17 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, Feb 15 '17 at 13:02
Take a look here: http://stackoverflow.com/questions/2159368/jquery-append-return-appended-elements `$.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, Feb 15 '17 at 13:03
$(this) inside the click function would be the reference to the
@SinanSamet, How can OP access `feature` object? `$(this)` is not a magic want will solve all problem. Seems you didn't understood the problem — Satpal, Feb 15 '17 at 13:31

Guruprasad J Rao · Answer 1 · 2017-02-15T13:22:46.360

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.

caramba · Answer 2 · 2017-02-15T13:15:06.860

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 '17 at 13:15

answered Feb 15 '17 at 13:01

caramba

21,963
19
86
127

score 1 · Answer 3 · answered Feb 15 '17 at 13:04

1

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

answered Feb 15 '17 at 13:04

Sami

2,050
1
13
25

score 1 · Answer 4 · answered Feb 15 '17 at 13:06

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

jQuery - Passing an object to the click handler

4 Answers4