actualización de datos HTML atribuir correctamente pero los cambios no se visualice en la página

Question

tengo este código HTML:

<input type="text" id="query" data-source="whatever"> 

tengo un poco de jQuery que cambia el atributo de datos con éxito, es decir "lo que" cambia a "prueba"

$(function() { 
    $('#query').data('source', 'test'); 
    console.log($('#query').data()); 
}); 

pero si inspecciono la página con Chrome, el atributo de datos no se ha actualizado ... ¡Puedo imprimirlo pero no puedo inspeccionar el nuevo valor! Mucha confusión ¿Algunas ideas?

aquí es el fiddle

Answer 1

Los datos no se almacenan en el elemento (attr uso o el apoyo para eso). En cambio jQuery lo mantiene en $ .cache.

Answer 2

En su violín que tiene este código.

$(function() { 
    $('#query') = $('#query').data('source', 'test'); 
    console.log($('#query').data()); 
}); 

que tiene de error ("lado izquierdo no válida en cesión"), porque $('#query') es una llamada de función y se encuentra assinging la respuesta de .data('source', 'test') a ella.

cambiarlo a

$(function() { 
    $('#query').data('source', 'test'); 
    console.log($('#query').data()); 
}); 

que va a funcionar bien.

Tome una mirada http://jsfiddle.net/r5YV9/10/

Answer 3

Si estás haciendo algo loco como el uso del atributo de datos para aplicar el estilo (no, no es realmente una locura), entonces necesita caché de jQuery tanto y el DOM para actualizar.

intercambiar el jQuery

$element.data(key, value); 

que no se actualizará el DOM a un método que hace las dos

var data = function($element, key, value) { 
    $element.data(key, value); 
    $element.attr('data-'+key, value); 
} 

data($element, key, value); 

Nota: Siempre pongo $ frente a las variables de jQuery, en caso de que alguien esté confundido acerca de eso. ;)