title: x-editable with Bootstrap 4 table and jquery
body: <p>I'm trying to implement xeditable ([xeditable<a href="https://github.com/vitalets/x-editable/tree/develop/dist/jquery-editable" rel="nofollow noreferrer">1</a>) with a Bootstrap 4  table. I am trying to emulate this snippet (<a href="https://bbbootstrap.com/snippets/edit-forms-inline-using-x-editable-editor-11973728" rel="nofollow noreferrer">https://bbbootstrap.com/snippets/edit-forms-inline-using-x-editable-editor-11973728</a>) with no luck.  Here is what I have in my index.php file:</p>
  <pre><code> &lt;th data-field=&quot;macAddr_id&quot; data-sortable=&quot;true&quot; data-filter-control=&quot;input&quot; data-editable=&quot;true&quot;&gt;Mac Address&lt;/th&gt; 
  </code></pre>
  <p>........................</p>
  <pre><code>&lt;?php
     while($row = $result-&gt;fetch_assoc()) {  ?&gt;
     &lt;tr&gt;
       &lt;td&gt; &lt;a href=&quot;#&quot; id=&quot;macAddr&quot; data-type=&quot;text&quot; data-pk=&quot;1&quot; class=&quot;editable editable-click editable-empty&quot; data-abc=&quot;true&quot;&gt;&lt;?php echo $row[&quot;macAddr_id&quot;]; ?&gt;&lt;/a&gt; &lt;/div&gt;
     &lt;/tr&gt;
  </code></pre>
  <p>The table is displayed fine.  In my index.js (which I include in my index.php file),I have:</p>
  <pre><code>$('#macAddr').editable({
      mode: 'inline',
      type: 'text',
      name: 'macAddr',
      pk: 1
  });
  </code></pre>
  <p>But editing does not work.  When I single-click or double-click, I get nothing.</p>
  <p>I have tried multiple versions of x-editable, including:</p>
  <p><a href="https://github.com/Talv/x-editable" rel="nofollow noreferrer">https://github.com/Talv/x-editable</a></p>
  <p><a href="https://vitalets.github.io/x-editable/index.html" rel="nofollow noreferrer">https://vitalets.github.io/x-editable/index.html</a>  (jquery version)</p>
  <p>Neither works.  Is there something I am missing? Or a better plugin to use?</p>