在访问键时，访问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

回答

相关问题