jQuery: come ascoltare le modifiche al DOM?

Question

E 'possibile e come posso ascoltare le modifiche attraverso l'intero albero DOM con jQuery?

Il mio problema specifico: Ho una funzione "tooltip" che visualizza il contenuto dell'attributo title in modo elegante quando si esegue un hover su qualsiasi elemento html. Quando si esegue il passaggio del mouse, tuttavia, in base allo standard, il browser esegue il rendering dello title nella propria casella. Vorrei sopprimere questo. Quindi, quello che ho pensato è di spostare il contenuto dell'attributo title in un attributo personalizzato (HTML5) data-title la prima volta che viene caricata la pagina, e quindi la mia funzione di suggerimento funzionerà con data-title.

Il problema è che in seguito potrei aggiungere/rimuovere/modificare l'HTML in modo dinamico, quindi ho bisogno di "rebind" quegli elementi - cambia di nuovo quel titolo. Sarebbe bello se ci fosse un ascoltatore di eventi che ascoltasse tali cambiamenti per me e rebind automaticamente gli elementi.

Answer 1

La mia ipotesi migliore è che si desidera ascoltare gli eventi di mutazione DOM. Puoi farlo tramite l'evento di mutazione DOM come qualsiasi normale evento javascript come un clic del mouse.

fare riferimento a questo: W3 MutationEvent

Esempio:

$("element-root").bind("DOMSubtreeModified", "CustomHandler"); 

Answer 2

Hai bisogno di guardare a questo qui: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents

Answer 3

[edito in risposta alle ricerche per utente Tony]

Così, senza codice aggiuntivo, questo è un po 'un colpo cieco , ma a me sembra che ci siano due cose a cui pensare qui: 1. il comportamento predefinito del tooltip del browser; 2. un DOM potenzialmente aggiornato e la possibilità che i tooltip personalizzati continuino a funzionare.

Per quanto riguarda il numero 1: quando si associa l'evento personalizzato all'elemento, è possibile utilizzare event.preventDefault() in modo che le descrizioni dei comandi non vengano visualizzate. Questo non funziona correttamente. Pertanto, la soluzione alternativa per continuare a utilizzare l'attributo "title" consiste nell'acquisire il valore, inserirlo nell'oggetto dati (la funzione $.data()) e quindi annullare il titolo con una stringa vuota (removeAttr è incoerente). Quindi, con il mouseleave, estrai il valore dall'oggetto dati e reinseriscilo nel titolo. Questa idea viene da qui: How to disable tooltip in the browser with jQuery?

Per quanto riguarda il n. 2: invece di re-binding sul cambiamento DOM, è sufficiente associare una volta a un elemento listener che non dovrebbe mai essere distrutto. Di solito questo è un elemento contenitore di qualche tipo, ma può anche essere document (approssimativo a .live() che ora è deprecato) se è davvero necessario un contenitore onnicomprensivo. Ecco un esempio che utilizza alcuni markup falso di mia invenzione:

var container = $('.section'); 

container.on('mouseenter', 'a', function() { 
    var $this = $(this); 
    var theTitle = $this.attr('title'); 
    $this.attr('title', ''); 
    $('#notatooltip').html(theTitle); 
    $.data(this, 'title', theTitle); 
}); 

container.on('mouseleave', 'a', function() { 
    $('#notatooltip').html(''); 
    var $this = $(this); 
    var storedTitle = $.data(this, 'title'); 
    $this.attr('title', storedTitle); 
}); 

mio markup irrealistico (solo per questo esempio) è qui:

<div class="section"> 
    <a href="#" title="foo">Hover this foo!</a> 
    <div id="notatooltip"></div> 
</div> 

E un violino è qui: http://jsfiddle.net/GVDqn/ o con qualche controlli di integrità: http://jsfiddle.net/GVDqn/1/

Probabilmente c'è un modo più ottimale per farlo (sinceramente non ho studiato se si potevano associare due funzioni separate per due eventi separati con un solo selettore), ma farà il trucco.

Non è necessario eseguire il reindirizzamento in base alla modifica DOM, il listener delegato lo gestirà automaticamente. E dovresti essere in grado di prevenire la funzionalità del tooltip di default semplicemente prevenendolo.

Answer 4

Come notato da Greg Pettit, si dovrebbe utilizzare la funzione on() sull'elemento.

Ciò che consente è di associare un selettore a un evento, quindi jQuery aggiungerà questo gestore di eventi quando gli oggetti restituiti dal selettore saranno disponibili.

Se si voleva una funzione di sparare su un mouse su evento e si voleva che il fuoco su tutti gli elementi con la classe di * FIELD_TITLE * si dovrebbe fare questo:

$('.field_title').bind('mouseenter', function() { doSomething(); }); 

In tal modo, il il mouse sopra l'evento su qualsiasi oggetto che abbia la classe di * field_title * ed esegua la funzione doSomething().

speranza che abbia un senso :)