javascript - 获取 jQuery Mobile 弹出窗口的触发元素

Question

我有一个像这样的简单 jQuery Mobile 弹出窗口:

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

我有多个链接触发相同的弹出窗口:

<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>

我想知道是否有任何方法可以确定单击哪个链接打开了弹出窗口。我试过:

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

但是我收到的控制台输出没有给我触发元素的任何对象(除非我遗漏了什么)。有办法做到这一点吗？

附加信息:我正在尝试用链接上的 data-food 属性值填充其他内容。因此我需要引用 <a>元素，而不是 <section>元素。

Answer 1

我为每个链接添加了一个id

     <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>

并使用了这个脚本

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

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

要使其正常工作，另请参阅 jsfiddle

点击“Pizza”后的控制台