jquery - ajax调用后上下文菜单不起作用

Question

插入一行并使用 ajax 刷新后，我的 jquery 代码不起作用。我正在使用右键单击的 ContextMenu。插入新行后，它不再起作用。

如何在我的上下文菜单中使用委托函数 jquery？

我的ajax表

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

还有我的上下文菜单

$('#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");
    }
  }
});

我的 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>

标签： jqueryajaxcontextmenubootstrap-table