2010-03-08 15 views
5

Diciamo che ho uno scenario in cui ho un plug-in globale (o almeno un plug-in che si collega a una gamma più ampia di eventi).jquery .live() interazioni evento

Questo plugin accetta un selettore e associa un clic in tempo reale ad esso. Qualcosa nella pseudo-jquery che potrebbe essere simile a questo:

$.fn.changeSomething = function(){ 
    $(this).live("change", function(){ alert("yo");}); 
} 

In un'altra pagina, ho un vivo ulteriore qualcosa di vincolante come questo:

$("input[type='checkbox']").live("click", function(){alert("ho");}); 

In questo scenario, la casella di controllo sarebbe idealmente finiscono per essere associato ad entrambi gli eventi dal vivo.

Quello che vedo è che l'evento di modifica si attiva come dovrebbe e sono avvisato "yo". Tuttavia, utilizzando questo evento di clic live, non lo faccio mai scattare. Tuttavia, usando un esplicito click binding, lo colpisco.

La soluzione facile è attivare un evento click alla fine del gestore di modifiche in tempo reale, ma questo mi sembra janky. Qualche idea?

Si noti che questo utilizza jquery 1.4.2 e si verifica solo in IE8 (suppongo che sia necessario anche il 6/7, ma non li ho testati).

un esempio (avrete bisogno di jquery-1.4.2.min.js):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<script src="jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $.fn.changeSomething = function(){ 
     var t = $(this); 
     t.live("change", function(){ 
      alert("yo"); 
     }); 
    }; 

    $(document).ready(function(){ 
    $("input[type='checkbox']").changeSomething(); 
    $("#special").live("click", function(){ 
     alert("ho"); 
    }); 
    }); 
</script> 
</head> 
<body> 
<form> 
    <input type="checkbox" id="cbx" /> 
    <input type="checkbox" id="special" /> 
    </form> 
</body> 
</html> 
+0

Puoi pubblicare il codice intorno l'esempio non funziona? per esempio. è avvolto in un pronto? –

+0

Certo, guarda la mia modifica più recente. Esempio piuttosto semplice, ma questo è fondamentalmente il flusso. – ddango

+0

Ogni volta sparo entrambi, il cambiamento spara e poi il clic ... quale browser stai usando che sta avendo problemi? –

risposta

5

Tu sai che IE non verrà generato l'evento "cambiamento" fino a quando la casella di controllo perde il focus, giusto?

modifica mentre penso che sia vero, l'effetto di quella pagina di test è piuttosto bizzarro. Ci sto ancora giocando. Il meccanismo "vivo" mi confonde e mi rende un po 'nervoso, anche se capisco perfettamente il suo valore.

ho messo la pagina di prova (leggermente modificata e chiarita) su: http://gutfullofbeer.net/clicks.html e ho intenzione di iniziare a fare un po 'di jQuery debug

zona crepuscolare: Come notato nei commenti, quando mi legano un manichino "modifica" gestore per l'elemento del corpo:

$('body').bind('change', function() { return true; }); 

quindi le cose iniziano a funzionare normalmente. Sono sicuro che @Alex ha ragione, che sta succedendo qualcosa nel modo in cui jQuery sta cercando di simulare il bubbling dell'evento "change". Ancora spettrale comunque. La pagina di test è http://gutfullofbeer.net/clicks-body.html e puoi vedere le stranezze facendo clic su "Imposta prima con il gestore modifiche", quindi fai clic sulle caselle di controllo e nota che il gestore "clic" sul secondo si attiva solo una volta, quindi fai clic su "Associa un gestore al corpo "e guarda come si comportano le caselle di controllo dopo.

+0

scoperta interessante, ma solo ulteriormente mi fa pensare che sia un bug introdotto in 1.4.x – ddango

+1

Molto probabilmente! Ho intenzione di pubblicarlo sul forum di jQuery e vedere se qualcuno può spiegarlo. – Pointy

1

Provare a utilizzare $.delegate con un antenato comune, invece di $.live

La chiave da ricordare con live è che l'evento è non legata all'elemento selezionato. È legato a document e quindi una volta che l'evento è entrato nel documento, viene confrontato con il selettore passato sulla destinazione dell'evento.

La chiave per imparare da ciò è che in IE - l'evento di cambiamento non bolle naturalmente, come nella maggior parte dei browser.In IE l'evento "bolle" basato su un'euristica che funziona allo stesso modo in tutti i test jQuery come l'evento reale in altri browser. Probabilmente c'è qualcosa nella tua altra funzione che impedisce a questa euristica di funzionare. Quindi ha senso che sia specifico per IE. Non che questa è una buona cosa ...

+0

Ciao Alex! A volte indosso una cravatta. Ad ogni modo, questo è piuttosto strano. Quello che ho trovato oltre al fatto che il comportamento cambia in base all'ordinamento della registrazione del gestore, cambia anche se lego direttamente un gestore "click" a $ ("body"). Il gestore viene eseguito, ma i gestori "clic" e "modifica" vengono eseguiti sempre per la casella di controllo "speciale". Proverò "delegato". Correzione – Pointy

+0

- Devo associare un evento "change" al corpo, non "click". – Pointy

+0

buon suggerimento, ma ho provato a usare $ .delegate invece ($ ("body"). Delegate ("# special", "click", function() {...});) ma questo non risolve il problema problema. tuttavia, nota che la modifica dell'ordine funziona ancora con delegato come con il live. – ddango

0

È possibile utilizzare il jquery.livequery plugin

$("select[name='majorsList']").livequery("change",function() 
{ 
alert('in'); 
});