infoWindow 中的 gMap 3 和 jQuery DOM 访问

Question

我正在为社交网络应用程序开发自定义界面，并且我正在使用 infoWindows 来显示有关 pois 的信息。现在我想给用户编辑一些 pois 信息并保存它的可能性。 我的问题是，我无法访问 infoWindow 中的特定 DOM 元素。 这里我用 pois 解析一个 XML 文件并将 infoWindows 添加到它们。

function parseXml (xml){
poiXml = xml;
$(poiXml).find("POI").each(function(){

    imgs ="";
    $(this).find("PhotoFile").each(function(){
            imgs += '<tr><td><img src="http://socialdisplay.meinsandkasten.eu/pic/'
                +$(this).attr("name")
                +'?thumb=1"></td></tr>';
    })

    myMarkers.push({
        lat: $(this).find("Latitude").text(), 
        lng: $(this).find("Longitude").text(), 
        data:   '<div id="poiWindow" style="padding:40px">'
                    +'<form id="changeForm">'
                        +'<table>'
                            +'<tr>'
                                +'<th id="poiId" style="display:none">'+$(this).attr("id")+'</th>'
                                +'<th>Titel:<div id="titleChange">'+$(this).attr("title")+'</div></th>'
                            +'</tr>'
                            +'<tr>'
                                +'<td>Geschichte:<div id="storyChange">'+$(this).find("InformationFile").text()+'</div><td>'
                            +'</tr>'
                            +'<tr>'
                                +'<td>Bildbeschreibung:<div id="descriptionChange">'+$(this).find("PhotoDescription").text()+'</div><td>'
                            +'</tr>'
                            +'<tr>'+imgs+'</tr>'    
                            +'<tr>'
                                +'<td><div id="change">Geschichte &auml;ndern</div></td>'
                            +'</tr>'
                        +'</table>'
                    +'</form>'
                +'</div>'           
    })


});

$("#map").gmap3({
        action:'addMarkers',
         markers:myMarkers,
         marker:{
            options:{
                draggable: false
            },
            events:{
                click: function(marker, event, data){
                  var map = $(this).gmap3('get'),
                      infowindow = $(this).gmap3({action:'get', name:'infowindow'});
                  if (infowindow){
                    infowindow.open(map, marker);
                    infowindow.setContent(data);
                  } else {
                    $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}});
                  }
                }
             }
         }      
});
}

在初始化地图和文档准备功能之后，我想访问 infoWindow 中的更改 div，这不起作用。我错过了一些基本的东西吗？

$("#change").click(function(){
    if ($(this).text()=="Geschichte ändern") {
                    $(this).text("Geschichte speichern");
                    $("#poiWindow").get(0).contentEditable = "true";
                    $("#titleChange").get(0).contentEditable = "true";
                    $("#storyChange").get(0).contentEditable = "true";
                    $("#descriptionChange").get(0).contentEditable = "true";
                     // Weitere Befehle, wenn Button aktiv
          } else {
                     $(this).text("Geschichte ändern");
                     // Weitere Befehle, wenn Button inaktiv
          } 
})

感谢您的帮助。 何叔叔

Answer 1

好吧，我想通了，我真的错过了一些非常基本的东西！！！ 在我加载地图的那一刻，信息窗口中的 DOM 元素不存在。 它们是在我的应用程序中动态创建的。所以我无法在 $(document).ready(function(){etc... 我必须直接在信息窗口的html代码中编写onclick事件并编写一个单独的onclick函数 用于更改按钮。

这里是修改后的代码：

//add Pois to the map
$("#map").gmap3({
        action:'addMarkers',
         markers:myMarkers,
         marker:{
            options:{
                draggable: false
            },
            events:{
                click: function(marker, event, data){   
                  var map = $(this).gmap3('get'),
                      infowindow = $(this).gmap3({action:'get', name:'infowindow'});
                  var infoWinChange =
                                    "<form id='changeForm'>"+
                                        "<table>"+
                                            "<tr>"+
                                                "<th id='poiId' style='display:none'>"+ data.poiId +"</th>"+
                                                "<th>Titel:</th><th><div id='titleChange'>"+ data.title +"</div></th>"+
                                            "</tr>"+
                                            "<tr>"+
                                                "<td>Geschichte:</td><td><div id='storyChange'>"+ data.story +"</div><td>"+
                                            "</tr>"+
                                            "<tr>"+
                                                "<td>Bildbeschreibung:</td><td><div id='descriptionChange'>"+ data.description +"</div><td>"+
                                            "</tr>"+
                                            "<tr>"+ data.previewImg +"</tr>"+   
                                            "<tr>"+
                                                "<td><div id='buttonChange' onclick='clickChange()'>Geschichte &auml;ndern</div></td>"+
                                            "</tr>"+
                                        "</table>"+
                                    "</form>";    
                  if (infowindow){
                    infowindow.open(map, marker);
                    infowindow.setContent( 
                        infoWinChange              
                    );
                  } else {
                    $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: 
                        infoWinChange
                                  }});
                  }
                }
             }
         }      
});    

以及单独的点击功能

function clickChange(){
// alert("Handler for .click() called.");
    if ($("#buttonChange").text()=="Geschichte ändern") {
                    $("#buttonChange").text("Geschichte speichern");
                    $("#changeForm").get(0).contentEditable = "true";
                    $("#titleChange").get(0).contentEditable = "true";
                    $("#storyChange").get(0).contentEditable = "true";
                    $("#descriptionChange").get(0).contentEditable = "true";
                    // Weitere Befehle, wenn Button aktiv
          } else {
                    $("#buttonChange").text("Geschichte ändern");
                    $("#changeForm").get(0).contentEditable = "false";
                    $("#titleChange").get(0).contentEditable = "false";
                    $("#storyChange").get(0).contentEditable = "false";
                    $("#descriptionChange").get(0).contentEditable = "false";
                    // Weitere Befehle, wenn Button inaktiv
          } 
}

我希望对其他人有所帮助;-)))

何叔叔