Почему не срабатывает код

464

19 апреля 2022, 09:30

Так работает

<button type="submit" class="col-1 col-sm-1 col-md-1 header_nav_button_search ml-md-0" onclick="search_start()"><img src="img/search.png" alt="search"></button>
function search_start(){...}

А так нет

<button type="submit" class="col-1 col-sm-1 col-md-1 header_nav_button_search ml-md-0"><img src="img/search.png" alt="search"></button>
$('.header_nav_button_search').click(function(){...})

Answer 1

Как можете наблюдать, код работает.

$('.header_nav_button_search').click(function() {
  alert('click');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" class="col-1 col-sm-1 col-md-1 header_nav_button_search ml-md-0"><img src="img/search.png" alt="search"></button>

Он может не работать из-за того, что находится в форме и при нажатии кнопки button type="submit" вы отправляете форму обрабатываться.
Для этого нужно использовать "отключить" обработку формы, допустим таким образом

$('.header_nav_button_search').click(function() {
  alert('click');
  return false; // Отменяем отправку формы.
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/">
<button type="submit" class="col-1 col-sm-1 col-md-1 header_nav_button_search ml-md-0"><img src="img/search.png" alt="search"></button>
</form>