jQuery事件流 [英] jQuery flow of events

问题描述

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

In pseudocode, here's what I want to do:

1. 向Google Map添加一堆标记
2. 向每个标记添加点击侦听器-侦听器将打开jQuery Mobile对话框页面
3. 对话页面一旦上线(对于布局而言很重要)，请进行Ajax调用，并使用附加到标记的ID来设置img标记的src属性.

1. Add a bunch of markers to a Google Map
2. Add a click listener to each marker - the listener opens a jQuery Mobile dialog page
3. Once the dialog page is live (important for layout purposes), make an Ajax call and set the src attribute of an img tag, using an ID attached to the marker.

不过，我发现管理事件流程有些困难.

I'm finding managing the flow of events a bit difficult, though.

// 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/(滚动到英国伦敦的位置以查看一些标记)

This is simplified code - the actual page where I'm having the issue is at http://cyclestreets.darkgreener.com/location/ (scroll to a London, UK location to see some markers)

感谢您的帮助.

推荐答案

弄清楚了:设置全局变量以在单击标记时设置v.id，然后为$('#photo').live设置全局处理程序.引用了全局变量.

Figured it out: set a global variables to set v.id on marker click, and then have a global handler for $('#photo').live which references the global variable.

这篇关于jQuery事件流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！