Solución:
En realidad, tu último ejemplo:
<div data-foobar="{"foo":"bar"}"></div>
parece estar funcionando bien (consulte http://jsfiddle.net/GlauberRocha/Q6kKU/).
Lo bueno es que la cadena en el atributo de datos se convierte automáticamente en un objeto JavaScript. No veo ningún inconveniente en este enfoque, ¡al contrario! Un atributo es suficiente para almacenar un conjunto completo de datos, listo para usar en JavaScript a través de las propiedades del objeto.
(Nota: para que a los atributos de datos se les asigne automáticamente el tipo Object en lugar de String, debe tener cuidado de escribir JSON válido, en particular para encerrar los nombres de las claves entre comillas dobles).
en lugar de incrustarlo en el texto, solo usa $('#myElement').data('key',jsonObject);
en realidad, no se almacenará en el html, pero si está utilizando jquery.data, todo eso se abstrae de todos modos.
Para recuperar el JSON no lo analices, solo llama:
var getBackMyJSON = $('#myElement').data('key');
Si estas recibiendo [Object Object] en lugar de JSON directo, simplemente acceda a su JSON mediante la clave de datos:
var getBackMyJSON = $('#myElement').data('key').key;
Así es como funcionó para mí.
Objeto
var my_object ={"Super Hero":["Iron Man", "Super Man"]};
Colocar
Codifique el objeto en cadena con encodeURIComponent () y establezca como atributo:
var data_str = encodeURIComponent(JSON.stringify(my_object));
$("div#mydiv").attr("data-hero",data-str);
Obtener
Para obtener el valor como un objeto, analice el valor del atributo decodificado, con decodeURIComponent ():
var data_str = $("div#mydiv").attr("data-hero");
var my_object = JSON.parse(decodeURIComponent(data_str));