infoWindow에서 gMap 3 및 jQuery DOM 액세스

Question

소셜 웹 애플리케이션 용 사용자 인터페이스에서 작업 중이며 정보창을 사용하여 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}}); 
        } 
       } 
      } 
     }  
}); 
} 

그리고지도와 문서 준비 함수의 초기화 후

, 나는 작동하지 않는 정보창에 변경 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

ok 나는 정말로 매우 근본적인 뭔가를 놓친 것을 알아 냈다! 정보창의 DOM 요소가지도를로드하는 순간 존재하지 않습니다. 내 앱에서 동적으로 생성됩니다. 그래서 나는 $ (document) .ready (function() {...에 접근 할 수 없다. 나는 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 
      } 
} 

나는 다른 사람 ;-)))

도움이되기를 바랍니다

아저씨 호