jQuery, getting data of clicked element

Something like event.target

[csdude55]

I'm struggling to find the right combination here, and I'm hoping you guys can help.

I have HTML like this:

<div id="classifiedList">
 <div id="itemList">
  <div id="fragLoad">
   <div data-listid="12345">
    <div class="float_left"><img ...></div>
    <div class="float_left">
     <div>Title</div>
     <div>Description</div>
    </div>
   </div>
  </div>
 </div>
</div>

When the user clicks anywhere within div data-listid="12345">, I want to return the 12345.

This is the script I'm working with:

$(function() {
 $('#fragLoad').on('click', function(event) {
  alert($(event.target).data('listid'));
 });
});

I've tried every combination I can think of... event.target, $(event.target), event.currentTarget, event.delegateTarget, using getAttribute(), attr(), and data(). But I either get null, undefined, or content from #fragLoad or #classifiedList.

Can you guys suggest how I can get the data I'm looking for? I specifically need to use jQuery's $(element).on for this.

[robzilla]

Well, if the event listener targets #fragLoad, and that's not the element that contains the data-listid attribute, how could you expect the value to be returned?

$(function() {
 $('#fragLoad').on('click', '[data-listid]', function(event) {
 console.log($(this).data('listid'));
 });
});

Note that IDs are not supposed to be repeated in a document. You could also do:

$(function() {
 $('[data-listid]').on('click', function(event) {
 console.log($(this).data('listid'));
 });
});

(Using the console log is generally more productive, because less intrusive, than alert().)

[robzilla]

Actually, I now understand that you are assuming that any clicks within #fragLoad would also be within a <div> with the listid data attribute (because there's nothing outside of it), so I see why you'd try to get the value from the event target, but you should be aware that if anyone clicks on, say, an image contained within that <div>, then the target of the event is the image, not the containing <div>, so by necessity you'd then have to traverse up the DOM hierarchy to find the first element with the listid attribute, which is a little awkward, much like this excessively long sentence.

[csdude55]

Awesome, Rob, that helped a lot :-) FWIW, I don't have a repeating ID, though... you're right, #fragLoad is a container for all of the children, and there's nothing in the container except for a long list of children with unique data-listid.

Using [data-listid] as the selector seemed to work perfect, even if I click on the image. Maybe what you described is browser-specific? Either way, I added a condition so if there's no data-listid then nothing happens:

$(function() {
 $('#fragLoad').on('click', '[data-listid]', function(event) {
  if ($(this).data('listid'))
   console.log($(this).data('listid'));
 });
});

In case this is a browser-specific issue... this is mostly being written for mobile devices, and I do have a bit of older mobile usage (going back to a handful of iOS 4). How would you suggest making it backwards compatible?

[robzilla]

Using [data-listid] as the selector seemed to work perfect, even if I click on the image. Maybe what you described is browser-specific? Either way, I added a condition so if there's no data-listid then nothing happens

No, what I was saying about clicking an image within the <div>, and that image then becoming the target, is in fact only relevant if you actually use the event target in an attempt to get the listid value, as you did previously. The target will always be the thing you clicked, whereas $(this) will refer back to the selector. [jsfiddle.net...] Click "Description" and check the console.

Now that you only attach the event listener to elements within #fragLoad that contain the data-listid attribute, there's also no point in checking if the element has the listid attribute, because the event wouldn't fire if it didn't :-)

FWIW, I don't have a repeating ID, though

Having previously seen the page, you do seem to be repeating IDs like fragLoad and itemList with every new set of items added to the document through the infinite scroll mechanism. Not sure if it's a problem for jQuery though.

[csdude55]

Having previously seen the page, you do seem to be repeating IDs like fragLoad and itemList with every new set of items added to the document through the infinite scroll mechanism. Not sure if it's a problem for jQuery though.

Ohhhhhh, I see what you mean now... after the infinite scroll brings in the second iteration, the containers inside of the scrolling container are repeated. I didn't understand what you meant before, but now I get it.

The #itemList container was suggested as an ID from the infinite scroll example I was using, but now I see the problem so I'll play with it and see if I can use something else as a selector. Thanks for the heads up!