Getting only first value of a button clicked which has multiple buttons with multiple values

Question

Here i am trying to pass the value of the button(for example if we have pass three value then 3 cells with 3 buttons will appear with the different values) but still when i output the value on click of any button i get the value of first button.

    <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);
});

I want to get the value of the button clicked here is the example image. Which ever button i click on the value displayed is 2.

Answer 1

Try this

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

Here is the full example

$(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'/>

Answer 2

I hope it can help you))

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

Answer 3

You should review jquery bind function :

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

Here is a working JSFiddle : https://jsfiddle.net/8ko5ua7j/1/

Answer 4

尝试关注

$(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>