Context Menu doesn't work after ajax call

Question

My jquery code does not work after inserting a line and refreshing with ajax. I'm using ContextMenu that works with a right click. After inserting the new line, it does not work anymore.

How to use delegate function jquery in my Context Menu ?

My ajax table

function mytablehtml() {
  $.ajax({
      type: 'ajax',
      url: 'myurl_form',
      async: false,
      dataType: 'json'
    })
    .done(function(data) {
      var html = '';
      var i;
      for (i = 0; i < data.length; i++) {
        html += '<tr id="' + data[i].id + '">' +
          '<td>' + data[i].id + '</td>' +
          '<td>' + data[i].code + '</td>' +
          '<td>' + data[i].designation + '</td>' +
          '<td>' + data[i].quantity + '</td>' +
          '<td>' + data[i].unit_price + '</td>' +
          '<td>' + data[i].amount + '</td>' +
          '<td><i class="fa fa-edit fa-lg"></i> <i class="fa fa-trash fa-lg"></i></td>' +
          '</tr>';
        $('#table').html(html);
      }
    });
}

And my Context Menu

$('#tableContext').bootstrapTable({
  contextMenu: '#context-menu',
  onContextMenuItem: function(row, $el) {
    ////// ADD QUOTATION
    if ($el.data("item") == "add") {
      alert("OK ADD");
    }


    if ($el.data("item") == "edit") {
      alert("OK EDIT");
    }

    if ($el.data("item") == "delete") {
      alert("OK DELETE");
    }
  }
});

My HTML

<table id="tableContext" class="table table-hover" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>id</th>
      <th>statut</th>
      <th>code</th>
      <th>Designation</th>
      <th>Quantité</th>
      <th>Prix unitaire</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody id='table'>

  </tbody>
</table>


<ul id="context-menu" class="dropdown-menu">
  <li data-item="add"><a>add</a></li>
  <li data-item="edit"><a>edit</a></li>
  <li data-item="delete"><a>delete</a></li>
</ul>