Your first link, where it's working, is using jQuery 1.9.0.
Your second link, where it isn't working, is using jQuery 1.7.2.
The reason it isn't working is that the regular expression used by jQuery 1.7.2 (the version you're using on that site), which is /^(?:\{.*\}|\[.*\])$/
, fails to detect that the attribute contains correct JSON and so doesn't pass it on to $.parseJSON
.
The regular expression used by jQuery 1.10.2, which is /(?:\{[\s\S]*\}|\[[\s\S]*\])$/
, does correctly detect that it has JSON, and does pass it on to $.parseJSON
. (That expression seems rather permissive to me, but if it passes on something invalid and the parse fails, it continues with the string.) Persumably they fixed the regex somewhere between 1.7.2 and 1.9.
Here's a test page using the JSON from the first mapLink
on your page using jQuery 1.7.2:
<div id="test" data-location='{
"id":"1",
"slug":"watermans-arts-centre",
"page":"1",
"lat":"51.485768",
"lng":"-0.29806459999997514",
"pinType":"loc",
"name":"Watermans Arts Centre",
"linkType":"list"
}'></div>
<script>
(function() {
var test = $("#test");
display("jQuery v" + test.jquery);
display("typeof data: " + typeof test.data("location"));
function display(msg) {
$("<p>").html(String(msg)).appendTo(document.body);
}
})();
</script>
...which outputs:
jQuery v1.7.2 typeof data: string
...and here's that same page using jQuery 1.10.2, which outputs:
jQuery v1.10.2 typeof data: object