Click event on Button INSIDE table

Question

How to open Modal Dialog from when I click on Button inside table?

function GetAllCountries() {

    $('#update_panel').html('Loading Date....');
    $('#update_panel').html("<img src='/Pic/ajax-loader.gif'/>")
    $.ajax({
        url: '/Home/GetCountries',
        type: 'GET',
        datatype: 'Json',
        success: function (data) {
            if (data.length > 0) {
                var $data = $('<table id="tableItems"> </table>').addClass('table table-responsive table-striped');
                var header = "<thead><tr><th>Country ID</th><th>Country</th></tr></thead>";
                $data.append(header);

                $.each(data, function (i, row) {
                    var $row = $('<tr/>');
                    $row.append($('<td/>').html(row.CountryId));
                    $row.append($('<td/>').html(row.CountryName));

                    $row.append($('<td/>').html("<button class='A' id='mybtn'>Edit</button>"));

                    $data.append($row);
                });

                $('#update_panel').html($data);
            }
            else {
                var $noData = $('<div/>').html('No Data Found!');
                $('#update_panel').html($noData);
            }
        },
        error: function () {
            alert('Error! Please try again.');
        }
    });
}

I tried the following code but didn't work

$("#mybtn").click(function () {
        $("#CreateForm").dialog({
            autoOpen: false,
            modal: false,
            width: 500,
            height: 500,
        });
        $("#CreateForm").dialog('open');
    })

I think I need something like to reach the button INSIDE the table and add click event of it

$("#Table: Tbody,th,tr").click(function () {
        $("#CreateForm").dialog({
            autoOpen: false,
            modal: false,
            width: 500,
            height: 500,

Answer 1

When you create the button you also have to set the click event. Any event created before the initialization of an element won't be attached to that specific element. So change your code from this:

$row.append($('<td/>').html(row.CountryId));
$row.append($('<td/>').html(row.CountryName));

$row.append($('<td/>').html("<button class='A' id='mybtn'>Edit</button>"));

$data.append($row);

To this:

$row.append($('<td/>').html(row.CountryId));
$row.append($('<td/>').html(row.CountryName));

$button = $('<button />', {class: 'whatever', id: 'myButton' /* AND SO ON */};
$($button).click(function() {
    // CODE TO OPEN THE MODAL
});

$row.append($button);

$data.append($row);

* EDIT *

beanId recover

I hope the code is clear. Anyway Using HTML5 data attribute, you can easily recover the ID of the bean you have to edit. You can also use the action anchor to open a modal, and set to that modal specific values.

$(document).ready(function() {
  $('.actionButton').click(function() {
    // Recover data-bean-id tag value
    var beanId = $(this).data('beanId');
    
    // Do whatever you want
    alert('Bean value:' + beanId)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- ** The 'actionButton' anchor can be also used to open a modal -->
<table id="myTable">
  <thead>
    <tr>
      <td>#</td>
      <td>FIELD 1</td>
      <td>FIELD 2</td>
      <td>ACTIONS</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>AAAAAAA</td>
      <td>BBBBBBB</td>
      <!-- Setting data-bean-id html5 tag, used to recover the id -->
      <td><a class="actionButton" href="#" data-bean-id="1">ACTION</a></td>
    </tr>
    <tr>
      <td>2</td>
      <td>AAAAAAA</td>
      <td>BBBBBBB</td>
      <!-- Setting data-bean-id html5 tag, used to recover the id -->
      <td><a class="actionButton" href="#" data-bean-id="2">ACTION</a></td>
    </tr>
    <tr>
      <td>3</td>
      <td>AAAAAAA</td>
      <td>BBBBBBB</td>
      <!-- Setting data-bean-id html5 tag, used to recover the id -->
      <td><a class="actionButton" href="#" data-bean-id="3">ACTION</a></td>
    </tr>
  </tbody>
</table>