Question

I have a simple jQuery Mobile popup like this:

<section data-role="popup" data-overlay-theme="a" id="eat">
    Are you sure you want to eat?
</section>

And I have multiple links triggering the same popup:

<a href='#eat' data-role='button' data-rel='popup' data-position-to='window' data-food="pizza">Pizza</a>
<a href='#eat' data-role='button' data-rel='popup' data-position-to='window' data-food="sandwich">Sandwich</a>

I’m wondering if there’s any way I can determine which link was clicked to open the popup. I have tried:

$('#eat').on('popupafteropen', function(event) {
    console.log(event);
});

But the console output I have received doesn’t give me any object for the trigger element (unless I’m missing something). Is there a way to do this?

Additional information: I’m trying to populate something else with the value of the data-food attribute on the link. Therefore I need a reference to the <a> element, not the <section> element.

Answer 1

I added an id for each link

     <a href='#eat' id="pizza"    data-role='button' data-rel='popup' data-position-to='window' data-food="pizza">Pizza</a>
     <a href='#eat' id="sandwich" data-role='button' data-rel='popup' data-position-to='window' data-food="sandwich">Sandwich</a>

and used this script

<script>
  $('#pizza').on( "click", function() {
    console.log(this);
  });

  $('#sandwich').on( "click", function() {
    console.log(this);
  });
</script>

to get it working, see also jsfiddle

console after clicking “Pizza”