jQuery事件流

在伪代码中，这是我想要做的：

1. 将一堆标记添加到Google地图
2. 为每个标记添加一个单击侦听器 – 侦听器将打开一个jQuery Mobile对话框页面
3. 一旦对话框页面生效 （对于布局目的很重要），使用附加到标记的ID进行Ajax调用并设置img标记的src属性。

不过，我发现管理事件的流程有点困难。

 // Set up value of HTML elements inside dialog // Should call after the dialog is live, // otherwise layout breaks horribly. function setUpPhoto(id) { // Cut for brevity: Ajax call to get URL. $('#photo-image').attr({ src: image_url }); } // Add a map marker and listeners function addNewMarker(v) { var map_marker = new google.maps.Marker({ position: v.latlng, title: v.caption }); map_marker.setMap(map); // Add a click listener for each marker // This should show the dialog, and then set it up, using the appropriate ID. google.maps.event.addListener(map_marker, 'click', function() { // Show the dialog $.mobile.changePage($("#photo"), 'pop', false, true); // ISSUE - how to call this only after the dialog is live? setUpPhoto(v.id); // ... could attach it like this, but how to do for each marker? $('#photo').live('pageshow', function (event, ui) { getIndividualPhoto(v.id, ''); }); }); } $.each(data.marker, function(i,v) { addNewMarker(v); }); 

这是简化的代码 – 我遇到问题的实际页面是http://cyclestreets.darkgreener.com/location/ （滚动到伦敦，英国的位置查看一些标记）

谢谢你的帮助。

Answer 1

弄清楚：设置全局变量以在标记点击上设置v.id，然后为$（’#photo’）。live提供全局处理程序，引用全局变量。