jQuery evento che bolle sul pulsante non funziona come previsto in Firefox

Question

Ho un elemento <button> all'interno del quale ho 2 elementi <span>. Ho 2 gestori di eventi click jquery collegati per ciascuno degli elementi span in modo da poter fare quello che mi piace per ogni clic. Ecco un rapido sguardo del codice di base:

HTML

<button> 
    <span>Text1</span> 
    <span>Text2</span> 
</button> 

Javascript

$(function() { 
    $('button').bind('click', function() { 
     console.log('button clicked'); 
    }); 
    $('button > span:eq(0)').bind('click', function() { 
     console.log('text1 span clicked'); 
    }); 
    $('button > span:eq(1)').bind('click', function() { 
     console.log('text2 span clicked'); 
    }); 
}); 

Questo è tutto lavorare bene in Chrome e l'evento click viene catturata nell'ordine corretto : prima su uno qualsiasi degli elementi span e quindi l'evento bolle fino all'elemento del pulsante parent.

Il problema è che in Firefox l'evento click non viene attivato per nessuno degli elementi span, solo il gestore eventi pulsante registra l'evento come se fosse stato attivato.

Ecco un violino in modo da poter vedere quello che voglio dire: http://jsfiddle.net/spider/RGL7a/2/

Grazie

Answer 1

Una soluzione semplice sarebbe quella di utilizzare un elemento <div> invece di un elemento pulsante. Inserisci il codice comune che vuoi attivare in una funzione, quindi esegui la funzione quando viene fatto clic su uno degli span e sul codice univoco dello span. Se si voleva essere più compatibile con 508 si potrebbe creare il campate in <a> tag (o anche <button> tag.

Ovviamente, che non spiega la gestione degli eventi di FF ma potrebbe essere un modo più veloce per andare.

Answer 2

provare a cambiare

<button> to <button type="button"> 

Questo dovrebbe risolvere il problema fuori del blocco. la ragione per cui il suo non funziona è perché il suo seguito attraverso con l'azione predefinita di un pulsante, che è quello di presentare. es pULSANTE avrebbe bisogno return false in javascript per leggere il tuo clic. Proprio come se dovessi provare a fare clic su un link con out impostando la sua azione predefinita per restituire false.

Se si aggiunge la seguente riga di codice jQuery a js, questo dovrebbe risolvere anche il problema. Assicurati di aggiungere il codice prima del pulsante> span fai clic su bind.

 <script type="text/javascript"> 
     $(function() { 
      $('button').click(function(){ 
       return false 
      }); 
     }); 
    </script>   

Spero che questo aiuti.

-D