Получение только первого значения нажатой кнопки, которая имеет несколько кнопок с несколькими значениями

Question

Здесь я пытаюсь передать значение кнопки (например, если мы передадим три значения, тогда появятся 3 ячейки с 3 кнопками с разными значениями), но все же, когда я вывести значение при нажатии любой кнопки, которую я получузначение первой кнопки.

    <input type='hidden' class='approved' name='approved' value='{$event_id}'/>    
    <button type='button' value='{$event_id}' class='btn btn-info btn-xs approvedbtn' data-dismiss='modal' tabindex='6'>Approve '{$event_id}'</button>";


$(document).on('click', '.approvedbtn', function (event) {
   var buttonValue = $("input[class=approved]").val();
   console.log('a value is:',buttonValue);
});

Я хочу получить значение нажатой кнопки, вот пример изображения.Какая кнопка при нажатии на отображаемое значение равна 2.

Answer 1

Попробуйте подписать

$(document).on('click','.approvedbtn',function(){
$('#clickedButton').text($(this).text());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button'  class='btn btn-info btn-xs approvedbtn' data-dismiss='modal' tabindex='6'>Approve 1</button>
<button type='button'  class='btn btn-info btn-xs approvedbtn' data-dismiss='modal' tabindex='6'>Approve 2</button>
<button type='button'  class='btn btn-info btn-xs approvedbtn' data-dismiss='modal' tabindex='6'>Approve 3</button>
<button type='button'  class='btn btn-info btn-xs approvedbtn' data-dismiss='modal' tabindex='6'>Approve 4</button>
<br/>
<br/>
<label id="clickedButton"></label>

Answer 2

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

$(document).on('click', '.approvedbtn', function (event) {
   var inputValue = $(this).prev().val();
   console.log('a value is:',inputValue);
});

Answer 3

Вы должны рассмотреть функцию jquery bind:

$(document).on('click', function (event) {
   console.log('a value is:',$(event.target).val());
});

Вот рабочий JSFiddle: https://jsfiddle.net/8ko5ua7j/1/

Answer 4

Попробуйте это

$(document).on('click', '.approvedbtn', function (event) {
   var buttonValue = $(this).val();
   console.log('a value is:',buttonValue);
});

Вот полный пример

$(document).on('click', '.approvedbtn', function (event) {
   var buttonValue = $(this).val();
   console.log('a value is:',buttonValue);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Hello1" class='approvedbtn'/>
<input type="button" value="Hello2" class='approvedbtn'/>
<input type="button" value="Hello3" class='approvedbtn'/>