Zdarzenie jQuery bulgotanie na przycisku nie działa zgodnie z oczekiwaniami w przeglądarce Firefox

Question

Mam element <button> wewnątrz którego mam 2 <span> elementów. Mam 2 dołączone moduły obsługi zdarzeń kliknięcia jquery dla każdego z elementów zakresu, dzięki czemu mogę robić, co mi się podoba przy każdym kliknięciu. Oto krótkie spojrzenie kodu podstawowego:

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'); 
    }); 
}); 

To wszystko działa dobrze w Chrome i zdarzenie click jest ujęte w odpowiedniej kolejności : najpierw na dowolnym z elementów span, a następnie bąbelki zdarzeń do elementu przycisku nadrzędnego.

Problem polega na tym, że w programie Firefox zdarzenie click nie uruchamia się dla żadnego z elementów span, tylko procedura obsługi zdarzeń przycisku rejestruje zdarzenie jako wyrzucone.

Oto skrzypce, dzięki czemu można zobaczyć, co mam na myśli: http://jsfiddle.net/spider/RGL7a/2/

Dzięki

Answer 1

Prostym rozwiązaniem byłoby wykorzystanie elementu <div> zamiast elementu przycisku. Umieść wspólny kod, który chcesz wypalić, w funkcję, a następnie uruchom funkcję po kliknięciu jednego z zakresów oraz unikalnym kodzie. Jeśli chcesz być bardziej 508 zgodny można dokonać przęseł do <a> tagów (lub nawet <button> tagów.

Oczywiście, że nie wyjaśnia obsługi zdarzeń FF, ale to może być szybsza droga.

Answer 2

Spróbuj zmienić

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

to powinno rozwiązać problem nietoperza. powodem jej nie działa dlatego, że jej po drodze z domyślnym działaniem przycisku, który ma przedłożyć tj. BUTTON musiałby return false w javascript aby odczytał twoje kliknięcie, tak jakbyś próbował kliknąć link out ustawia domyślną akcję, aby zwrócić false.

Po dodaniu następującego kodu jQuery do pliku js powinno to również rozwiązać problem. Pamiętaj, aby dodać kod przed przyciskiem> Span click bind.

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

Mam nadzieję, że to pomoże.

-D