Detectar cambios en el contenido de los elementos con jQuery
change()
La función funciona y detecta cambios en los elementos del formulario, pero ¿hay alguna forma de detectar cuándo se cambió el contenido de un elemento DOM?
Esto no funciona, a menos que #content
sea un elemento de formulario.
$("#content").change( function(){
// do something
});
Quiero que esto se active al hacer algo como:
$("#content").html('something');
Además html()
, append()
la función no tiene devolución de llamada.
¿Alguna sugerencia?
Sé que esta publicación tiene un año, pero me gustaría brindar un enfoque de solución diferente a aquellos que tienen un problema similar:
El evento de cambio de jQuery se usa sólo en los campos de entrada del usuario porque si se manipula algo más (por ejemplo, un div), esa manipulación proviene del código. Entonces, encuentre dónde ocurre la manipulación y luego agregue lo que necesite allí.
Pero si eso no es posible por algún motivo (estás usando un complemento complicado o no puedes encontrar ninguna posibilidad de "devolución de llamada"), entonces el enfoque jQuery que sugeriría es:
a. Para una manipulación DOM sencilla, utilice el encadenamiento y recorrido de jQuery,
$("#content").html('something').end().find(whatever)....
b. Si desea hacer algo más, utilice jQuery
bind
con eventos personalizados ytriggerHandler
$("#content").html('something').triggerHandler('customAction'); $('#content').unbind().bind('customAction', function(event, data) { //Custom-action });
Aquí hay un enlace al controlador de activación jQuery: http://api.jquery.com/triggerHandler/
Estos son eventos de mutación .
No he usado API de eventos de mutación en jQuery, pero una búsqueda superficial me llevó a este proyecto en GitHub. Desconozco la madurez del proyecto.
El navegador no activará el evento onchange para <div>
los elementos.
Creo que el razonamiento detrás de esto es que estos elementos no cambiarán a menos que javascript los modifique. Si ya tiene que modificar el elemento usted mismo (en lugar de que el usuario lo haga), puede llamar al código correspondiente al mismo tiempo que modifica el elemento, así:
$("#content").html('something').each(function() { });
También puedes activar manualmente un evento como este:
$("#content").html('something').change();
Si ninguna de estas soluciones funciona para su situación, ¿podría brindar más información sobre lo que está tratando de lograr específicamente?