获取 jQuery 移动弹出窗口的触发元素

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

点击“披萨”后的控制台

Answer 2

$('#eat').on('popupafteropen', function(event) {
    console.log(this); // should give you the anchor element
    console.log($(this)); // should give you the jquery anchor element 
});

你也可以说event.target来获取dom元素。