¿Cómo se reemplaza un elemento en jQuery y se devuelve el elemento de reemplazo en lugar del elemento que se eliminó?Reemplazar un elemento y devolver el nuevo en jQuery
Tengo la siguiente situación. Tengo muchas casillas de verificación y una vez que haces clic en una de ellas, esa casilla de verificación se reemplaza por un ícono de carga. Una vez que sucede algo de AJAX, el icono de carga se reemplaza por un icono de marca.
El uso de jQuery replaceWith
, que haría algo como:
$("input[type='checkbox']").click(function() {
$(this).replaceWith("<img src='loading.jpg' alt='loading'/>");
$.post("somepage.php");
$(this).replaceWith("<img src='tick.jpg' alt='done'/>");
});
Sin embargo, esto no funciona porque replaceWith
devuelve el elemento que se ha eliminado, no la que se ha añadido. Así que después de que las cosas de AJAX se completen, loading.jpg
se quedará allí para siempre.
¿Hay alguna manera de que pueda devolver el elemento de reemplazo sin seleccionarlo?
Gracias de antemano.
En lugar de utilizar una clase .loading-image, ¿no podría simplemente mantener la referencia al img de carga y poner eso en la devolución de llamada, en lugar de volver a encontrarlo con $ ('. Loading-image')? – cdmckay
La pregunta (y la respuesta) era específica para replaceWith que devuelve el elemento que se eliminó, no el elemento que se creó. Puede crear el elemento y almacenar una referencia en una variable, luego hacer el reemplazo. En ese caso, creo que sí, podrías usar la referencia y no volver a buscarla. – tvanfosson