Не работает Button jquey в Mozila

197

25 мая 2019, 08:50

В хроме button работает. В мозиле не хочет. Возможно проблема в допустимом синтаксисе для мозила. Никак не пойму в чем проблема.

$("#next").click(function() { 
  if ($(".next_but button").is(":disabled")) { 
    //  
  } else { 
    $(".order").css("display", "none"); 
    $(".customer").css("display", "block"); 
    $(".resume").css("display", "none"); 
  } 
});

.next_but { 
  width: 330px; 
  margin: 0 auto; 
  margin-top: 28px; 
} 
 
.next_but button:hover { 
  opacity: 0.9; 
} 
 
.next_but button:active { 
  opacity: 0.7; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="next_but"> 
  <button disabled><img src="img/button_next_disable.png" alt="Далее" id="next"></button> 
</div>

Answer 1

Я нашел решение своей проблеме!

Причина по которой нажатие на кнопку не обрабатывается в mozila заключается в том, что я повесил обработчик события не на саму кнопку, а на картинку (тег img) находящейся внутри этой кнопки!

Было:

<button disabled><img src="img/button_next_disable.png" alt="Далее" id="next"></button>

А нужно:

<button disabled id="next"><img src="img/button_next_disable.png" alt="Далее"></button>

Answer 2

В данном примере FF не отрабатывает событие click на кнопке с атрибутом disabled

Firefox и, возможно, другие браузеры, отключают DOM-события в полях формы, которые отключены. Любое событие, которое начинается в отключенном поле формы, полностью отменяется и не распространяется на дерево DOM.