jQuery gestori di eventi non attivati ​​in IE

Question

Ho un elenco di elementi in una pagina con un set di controlli a MoveUp, MoveDown e Delete.

I controlli si trovano nella parte superiore dell'elenco nascosto per impostazione predefinita. Come si mouseover una riga oggetto, seleziono i controlli con jQuery

//doc ready function: 
.. 
var tools = $('#tools'); 
$('#moveup').click(MoveUp); 
$('#movedn').click(MoveDn); 
$('#delete').click(Delete); 
.. 
$('li.item').mouseover(function(){ 
    $(this).prepend(tools); 
}); 

Questa grande opera in Firefox .. gli strumenti si muovono nella riga corrente, e gli eventi click chiamano le funzioni Ajax. Tuttavia, in IE6 e IE7 .. non si verifica alcun clic. Ho provato a disassociare il mouseout e rebindare su ogni mouseover ... inutilmente.

Ho anche esaminato varie ragioni al di fuori di javascript (ad esempio conflitti png trasparenti, z-index, posizione: assoluta) .. anche nessuna soluzione trovata.

Alla fine ho dovuto aggiungere una riga di strumenti a ciascun elemento e mostrare/nascondere il mouse sopra/fuori. Funziona altrettanto bene - l'unico aspetto negativo è che ho molto più markup "strumenti" sulla mia pagina.

Qualcuno sa perché IE ignora/elimina/uccide gli eventi del mouse una volta che gli oggetti vengono spostati (utilizzando antefatto)? E perché il riavvicinamento dell'evento anche in seguito non ha alcun effetto? Mi ha infastidito per quasi 2 ore prima che mi arrendessi.

Answer 1

IE perderà gli eventi a seconda di come si aggiungono cose al DOM.

var ele = $("#itemtocopy"); 

$("#someotheritem").append(ele); // Will not work and will lose events 

$("#someotheritem").append(ele.clone(true)); 

Si consiglia inoltre di utilizzare .live() sugli eventi di clic per semplificare un po 'il codice. Il mouseover/out non è ancora supportato dal live. http://docs.jquery.com/Events/live

Answer 2

ho avuto un problema simile. cercando di usare .ready per caricare un div sul caricamento iniziale della pagina. funziona bene in FF, ma non in ie7.

Ho trovato un hack che sembra aggirare questo.

Ho caricato richiamare un callback, divLoaded().

In divLoaded, controllo $ ('# targetdiv'). InnerText.length < 50 o qualunque cosa pensiate indicherà che non è stato caricato. Se rilevo quel caso, chiamo semplicemente la funzione taht carica quel div nuovamente.

Stranamente, aggiungo anche un '.' al testo interiore prima di ricordare la funzione Ajax. A volte sembra che passiamo attraverso 3 o 4 cicli prima che il carico di ajax sia finalmente preso.

Questo mi porta a pensare che document.ready funzioni in modo impeccabile in IE7, che sembra dissipare un po 'di un mito che non è affidabile. Quello che in realtà "sembra" sta succedendo è che .load è un po 'flakey e non funziona bene quando la pagina è appena caricata.

Sono ancora un po 'verde con tutte le cose jQuery, quindi prendi questo w/un granello di sale. Interessato a sentire le opinioni di chiunque sulla mia piccola ipotesi.

applausi

greg

Answer 3

Ho appena trascorso l'intera giornata la risoluzione dei problemi di eventi scatenanti non su oggetti allegati al DOM, (IE7, jQuery 1.4.1) e non era perché avevo bisogno di usare in diretta() (comunque, buono a sapersi, Chad), né perché avevo bisogno di clonare gli oggetti.

E 'stato perché stavo selezionando i tag di ancoraggio che avevano un "#" in loro in questo modo:

var myitem = $('a[href=#top]'); 

La mia soluzione era quella di utilizzare il "attributo contiene Selector" in questo modo:

var myitem = $('a[href*=top]'); 

Fortunatamente ho abbastanza controllo su tutto ciò che probabilmente non si romperà in futuro. Questo non è tecnicamente correlato agli oggetti aggiunti, ma si spera che salvi qualcuno un po 'di tempo.