Consideraciones interesantes de data() y removeData() - II

El código de los elementos HTML será el siguiente:
<a href="#" id="enlace1">Enlace 1</a>
<br>
<a href="#" id="enlace2">Enlace 2</a>
<br>
<a href="#" id="enlace3">Enlace 3</a>
<br>
<br>
<div id="mensaje">
Mensaje...
</div>
<br>
<button id="guardar">guardar "midato" con valor "mivalor" en todos los enlaces</button>
<br>

<button id="guardarenlace1">guardar "midato" con valor "otro valor" en el enlace 1</button> 

Ahora veamos cómo aplicar eventos a los elementos de la página, para almacenar datos y mostrarlos. Comencemos por el código de los eventos de los botones.

$("#guardar").click(function(evento){

$("a").data("midato","mivalor");

$("#mensaje").html('He guardado en todos los enlaces un dato llamado "midato" con el valor

"mivalor"');

});

Con este código estamos almacenando datos en todos los enlaces. Cabe fijarse que con la función jQuery $("a") obtenemos un objeto jQuery donde están todos los enlaces de la página. Luego, al invocar data() sobre ese objeto, estamos almacenado ese dato en todos los enlaces existentes.

$("#guardarenlace1").click(function(evento){
$("#enlace1").data("midato","otro valor");
$("#mensaje").html('He guardado en el enlace1 un dato llamado "midato" con el valor "otro
valor"');
});

En este otro código del evento click para el segundo botón, almacenamos "otro valor" sobre el dato de antes, pero sólo lo hacemos sobre el enlace 1, dado que hemos utilizado el selector $("#enlace1"), con el identificador único del primer enlace. Y ahora podríamos ver el código para asignar un evento a todos los enlaces, para que al pulsarlos nos muestre lo que haya en el dato almacenado con data(), si es que hay algo.

$("a").click(function(evento){

evento.preventDefault();

valorAlmacenado = $(this).data("midato");

$("#mensaje").html("En el enlace <b>" + $(this).attr("id") + "</b> tiene el dato 'midato' como "

+ valorAlmacenado);

});

Como se puede ver, estamos creando un evento click, pero lo estamos haciendo sobre los tres enlaces que hay en la página a la vez, dado el selector utilizado en la función jQuery $("a"). Luego el código del evento será el mismo para los tres enlaces. Lo primero que se hace es un evento.preventDefault() que permite que el enlace no tenga el comportamiento típico (ir a la URL del href). 

A continuación hacemos:

valorAlmacenado = $(this).data("midato");