title: Getting the trigger element for jQuery mobile popup
body: <p>I have a simple jQuery Mobile popup like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;section data-role="popup" data-overlay-theme="a" id="eat"&gt;
      Are you sure you want to eat?
  &lt;/section&gt;
  </code></pre>
  
  <p>And I have multiple links triggering the same popup:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;a href='#eat' data-role='button' data-rel='popup' data-position-to='window' data-food="pizza"&gt;Pizza&lt;/a&gt;
  &lt;a href='#eat' data-role='button' data-rel='popup' data-position-to='window' data-food="sandwich"&gt;Sandwich&lt;/a&gt;
  </code></pre>
  
  <p>I'm wondering if there's any way I can determine which link was clicked to open the popup. I have tried:</p>
  
  <pre class="lang-js prettyprint-override"><code>$('#eat').on('popupafteropen', function(event) {
      console.log(event);
  });
  </code></pre>
  
  <p>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?</p>
  
  <p><strong>Additional information:</strong> 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 <code>&lt;a&gt;</code> element, not the <code>&lt;section&gt;</code> element.</p>