在訪問鍵時，訪問JSON數據的jQuery數據在html5數據元素中返回undefined

嗨，我試圖讓點擊圖形時顯示在谷歌地圖上的一些引腳。我存儲所有我需要的數據位置元素在我的跨度標籤上的數據：在訪問鍵時，訪問JSON數據的jQuery數據在html5數據元素中返回undefined

<span class="showOnMap" data-location="{"lat":"51.4894805","lng":"-0.2942533000000367","name":"Brentford Towers","addr":"Green Dragon Lane\r\nBrentford TW8 0DF","pinType":"loc"}"> <img width="32" height="32" src="/images/Icons/map-icon.png"> 
</span>

我點擊功能是：

$('.showOnMap').click(function(){ 
      //alert('click'); 
      var myData = $(this).data('location'); 
      console.log(myData); 
      createMarkerWithInfo(myData); 
      //addToPanel(panelData); 
    })

創建標記功能引起了我的問題傳遞給它的數據在我提醒它時顯示爲未定義，或者嘗試使用它來創建標記，但它確實顯示在控制檯中，但是從我一直在閱讀控制檯的信息中不會被信任，因爲它會以當前狀態顯示數據，即當實際調用控制檯時可能未定義數據，

我不明白爲什麼它的undefined作爲json數據在dom（它實際上由php生成），所以在dom中定義，我可以理解，如果我正在做一個Ajax調用，爲什麼它可能會出現未定義。

function createMarkerWithInfo(myData){ 
     //console.log(myData); 
     //coords = myData.latlng.split(','); 
     alert(myData + 'pinType: '+ myData.pinType + ' lat: '+ myData.lat + ' lng: ' +myData.lng); 
     myLatLng = new google.maps.LatLng(myData.lat, myData.lng); 
     if(myData.pinType == 'loc'){ 
      var marker = new google.maps.Marker({ 
       position: myLatLng, 
       map: map, 
       title: myData.name,  
       icon: locimage, 
       shadow: locshadow, 
       shape: locshape 
      }); 
     } 
     if(myData.pinType == 'ub'){ 
      var marker = new google.maps.Marker({ 
       position: myLatLng, 
       map: map, 
       title: myData.name,  
       icon: ubimage, 
       shadow: ubshadow, 
       shape: locshape 
      }); 
     } 
     //alert('lat: '+myData.lat+','+'lng: '+myData.lng); 
     // Wrapping the event listener inside an anonymous function 
     // that we immediately invoke and passes the variable i to. 
     (function(myData, marker) { 
      // Creating the event listener. It now has access to the values of 
      // myData and marker as they were during its creation 
      google.maps.event.addListener(marker, 'click', function() { 
       //create thecontent for the infowindow 
       var content = createContent(myData); 
       infowindow.setContent(content); 
       infowindow.open(map, marker); 
      }); 

     })(myData, marker);  
     markersArray.push(marker); 
     markersPosArray.push(myLatLng); 
     bounds.extend(myLatLng); 
     map.fitBounds(bounds); 
     zoomMarkers(); 
    }

http://2012.reelfilmlocations.co.uk/Modules/builder_areaLocs.php 是頁面我的工作，什麼奇怪的是，我有一個類似的頁面（使用PHP包括，而不是一個獨立的頁面），它具有相同的功能和它的作品，我已經看了都和着看到一個diffirence也是什麼導致它不明確） http://2012.reelfilmlocations.co.uk/locations-london-west/

來源

2013-03-12 Dizzy Bryan High

術語：您不需要對DOM進行Ajax調用。 Ajax是服務器/客戶端通信。 – 2013-03-12 14:06:04

來自jquery .data（）doc關於HTML5 data- * attributes：這個底層方法不會檢索data- *屬性，除非更方便的.data（）方法已經檢索到它們。考慮使用[jquery。 attr（）]（http://api.jquery.com/attr/） – 2013-03-12 14:15:51

當數據屬性是一個對象（以'{'）或數組開頭（以'['開頭）'時，則使用jQuery.parseJSON來解析字符串;它必須遵循有效的JSON語法，包括帶引號的屬性名稱。數據屬性在第一次訪問數據屬性時被取出，然後不再被訪問或變異（所有的數據值都被內部存儲在jQuery中）。 – 2013-03-12 14:35:40

由於某種原因，json被裹在[ ]標籤。

alert(myData + 'pinType: '+ myData[0].pinType + ' lat: '+ myData[0].lat + ' lng: ' +myData[0].lng);

輸出正確的價值觀。

來源

2013-03-12 14:52:05

在訪問鍵時，訪問JSON數據的jQuery數據在html5數據元素中返回undefined

回答

相關問題