title: select attribute of an element inside data-content of a popover
body: <p>I was using Bootstrap 4 popover and suddenly got stuck with this issue. The problem is I can not select the attribute inside data-content of a popover. Here is the code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;a data-toggle='popover' data-placement='left' tabindex='0' data-trigger='focus' data-html='true' data-content="&lt;div class='pop-div'&gt;&lt;a href='#' class='text-center edit_web_ac' data-id='{$row['id']}' data-table='web_accounts'&gt;Edit&lt;/a&gt;&lt;br&gt;&lt;a href='#' class='text-center del_web_ac'&gt;Delete&lt;/a&gt;&lt;/div&gt;"&gt;Options&lt;/a&gt;
  </code></pre>
  
  <p>If you look closely, <strong>data-content</strong> attribute has two <code>&lt;a&gt;</code> tag inside it. I am using JQuery to select the attribute (<strong>data-id</strong>) of this inner <code>&lt;a&gt;</code> tag. I've tried <code>$(this).attr('data-id');</code> which returns <code>undefined</code>. So, my question is, how to get the attribute of this <code>&lt;a&gt;</code> [To be clear, the <code>&lt;a&gt;</code> which has a class <code>.edit_web_ac</code>].</p>
  
  <p>I've tried these solutions, But none of these fully match with my situation.</p>
  
  <p><a href="https://stackoverflow.com/questions/36092652/how-to-select-element-id-inside-attribute-tag-with-jquery">How to select Element Id inside attribute tag with jQuery?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/12950554/how-to-select-an-element-based-on-the-property-of-an-object-inside-a-data-attrib">How to select an element based on the property of an object inside a data attribute?</a></p>
  
  <p>Any suggestion is highly appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
  
  &lt;!-- jQuery library --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Popper JS --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Latest compiled JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
   &lt;a data-toggle='popover' data-placement='left' tabindex='0' data-trigger='focus' data-html='true' data-content="&lt;div class='pop-div'&gt;&lt;a href='#' class='text-center edit_web_ac' data-id='{$row['id']}' data-table='web_accounts'&gt;Edit&lt;/a&gt;&lt;br&gt;&lt;a href='#' class='text-center del_web_ac'&gt;Delete&lt;/a&gt;&lt;/div&gt;"&gt;Options&lt;/a&gt;
  
  
  &lt;script&gt;
    $(document).ready(function(){
      $("[data-toggle='popover']").popover({
          delay: 100
      });
  
     $('body').on('click', '.edit_web_ac', function (e) { 
       e.preventDefault();
       var content = $(this).attr('data-id');
       alert(content); //returns 'undefined'
     })
  
    })
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>