infoWindowのgMap 3とjQuery DOMアクセス

Question

私はソーシャルWebアプリケーション用のカスタムインターフェイスで作業しています。私はpoisに関する情報を表示するためにinfoWindowsを使用しています。今私は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}}); 
        } 
       } 
      } 
     }  
}); 
} 

とマップの初期化と文書レディ機能した後、私はうまくいかない、情報ウィンドウに変更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（）{などでアクセスできません。 私は、インフォインウインドウの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 
      } 
} 

私はそれが他の誰か;-)））

を役に立てば幸い

アンクルホー