JQuery событие пузырится на кнопку не работает, как ожидалось в Firefox

У меня есть элемент <button>, внутри которого у меня есть 2 <span> элемента. У меня есть два прикрепленных обработчика событий jquery click для каждого из элементов span, поэтому я могу делать все, что мне нравится, для каждого клика. Вот быстрый взгляд на базовый код:

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

Все работает отлично в Chrome, и событие click зафиксировано в правильном порядке: сначала на любом из элементов span, а затем событие пузырится до элемента родительской кнопки.

Проблема заключается в том, что в Firefox событие click не срабатывает ни для одного из элементов span, только обработчик событий кнопки регистрирует событие как запущенное.

Вот скрипка, чтобы вы могли видеть, что я имею в виду: http://jsfiddle.net/spider/RGL7a/2/

Спасибо

Ответы

Ответ 1

Простым решением было бы использовать элемент <div> вместо элемента кнопки. Поместите общий код, который вы хотите включить в функцию, а затем выполните функцию, когда щелкнут любой из интервалов, а также уникальный код диапазона. Если вы хотите быть более совместимым с 508, вы можете сделать прописные части тегами <a> (или даже тегами <button>.

Очевидно, что это не объясняет обработку событий FF, но это может быть более быстрый способ.

Ответ 2

Попробуйте изменить

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

Это должно решить вашу проблему с места в карьер. Причина, по которой он не работает, заключается в том, что он выполняет следующие действия с действием по умолчанию кнопки, которая должна быть отправлена. т.е. BUTTON понадобится вернуть false в javascript, чтобы он читал ваш клик. Так же, как если бы вы попытались щелкнуть ссылку, не установив ее действие по умолчанию для возврата false.

Если вы добавите следующую строку кода jQuery в js, это также должно решить вашу проблему. Обязательно добавьте код перед нажатием кнопки > span click bind.

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

Надеюсь, что это поможет.

-D