Почему функция Jquery click требует 2 кликов

Question

Я нажимаю кнопку, чтобы заполнить скрытое значение для использования с php. Этот jQuery заставляет меня дважды нажимать кнопку, прежде чем он вводит значение в скрытое поле, как сделать его одним щелчком мыши?

JQuery

$(document).ready(function() { 

    $('.btn-group button').click(function(){ 

     $("#hidd").val($(".btn-group").find('.active').val()); 

    }); 

}); 

HTML

<div class="btn-group"> 
     <button type="button" class="btn btn-default" value="150">150</button> 
     <button type="button" class="btn btn-default" value="450">450</button> 
    </div> 
    <input type="hidden" id="hidd" name="pass_amount" value=""></input> 

Answer 1

Вы должны изменить эту строку:

$("#hidd").val($(".btn-group").find('.active').val()); 

этим один:

$("#hidd").val($(this).val()); 

Поскольку первый щелчок активирует кнопку, второй выбирает значение предыдущего активированного.

Answer 2

Вы можете использовать JQuery's .click с API .on.

Таким образом вы нацеливаете определенную кнопку, на которую нажимаете, и вы можете захватить эти значения кнопок с помощью this.value Простой!

Чтобы настроить таргетинг, если кнопка (нажата) имеет активный класс, вы можете использовать API .hasClass JQuery.

Этот фрагмент использует ASI (Automatic Semicolon Inversion).

$(document).ready(function() { 
 
    $('.btn-group button').on('click', function() { 
 
    $("#hidd").val(this.value) 
 
    /* 
 
     To target just the class active you can do... 
 
     if ($(this).hasClass('active') { 
 
     $("#hidd").val(this.value) 
 
     } 
 
    */ 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="btn-group"> 
 
    <button type="button" class="btn btn-default" value="150">150</button> 
 
    <button type="button" class="btn btn-default" value="450">450</button> 
 
</div> 
 
<input type="value" id="hidd" name="pass_amount" value="" />