Событие jQuery, всплывающее на кнопке, не работает должным образом в Firefox - PullRequest
Новая
       23

Событие jQuery, всплывающее на кнопке, не работает должным образом в Firefox

11 голосов
/ 18 ноября 2011

У меня есть элемент <button>, внутри которого у меня есть 2 <span> элемента. У меня есть 2 прикрепленных обработчика события 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, а затем событие всплывает до родительского элемента button.

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

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

Спасибо

Ответы [ 2 ]

3 голосов
/ 18 ноября 2011

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

).

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

0 голосов
/ 19 ноября 2011

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

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

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

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

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

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

-D

...