jquery call a function when button element in a specific id is clicked

Question

I would like to call a function when any button is pressed within a particular table.

This works to call the function when any button is pressed anywhere

$(document)
  .on('click', 'button', fuction(){
   ...
  });

But I would like it to do it in a more specific case.

$(document)
  .on('click', '#imgPreviewTable.button', function(){
    ...     
  });

I know I can set the buttons to call a function independently but I need to do it this way. Any help is appreciated.

Answer 1

here is an example

HTML CODE:

<table id="mytable">
<thead>
<tr><th>Buttons</th></tr>
</thead>
<tbody>
<tr><td><input type="button" class="Tblbutton" value="button 1"></td></tr>
<tr><td><input type="button" class="Tblbutton" value="button 2"></td></tr>
<tr><td><input type="button" class="Tblbutton" value="button 3"></td></tr>
</tbody>
</table>

Javascript Code

$('#mytable Tblbutton').on('click',function(){
alert($(this).val());
})

Result is it would alert the value of the button you have clicked

Answer 2

Just a little addition, when buttons are created dynamically (with js). The above shown examples won´t work.

$('#imgPreviewTable').on('click', 'button', function(){
    // do something
})

http://api.jquery.com/on/