Question

我正在为社交网络应用程序开发自定义界面，我正在使用infoWindows显示有关poi的信息。现在我想让用户可以编辑一些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 &auml;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

好的我已经想通了，我真的错过了一些非常基本的东西！在我加载地图的那一刻，infowindow中的DOM元素不存在。它们是在我的App中动态创建的。所以我无法在$（document）.ready（function（）{etc ...中访问它们。我必须直接在infowindow的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
          } 
}

我希望能帮助别人; - ）））

何叔叔

infoWindow中的gMap 3和jQuery DOM访问

1 个答案: