title: jquery get the data-id of anchor tag
body: <p>I have the following table created from jQuery:</p>
  
  <pre><code>$('#btniLoad').click(function(){
  var gradelevel = $('#ylvl').val();
  
  $.ajax({
  type:'POST',
  url:"&lt;?php echo site_url('enrollment/searchTeacher');?&gt;",
  dataType:'json',
  data:{q:gradelevel},
  success: function(data){
  
    if(!data.teacherinfo[0])
    {
      var table = "There's no teacher registered yet";
  
    }
    else
    {
      var table = "&lt;table class='table table-striped table-bordered' cellspacing='0' width='100%'&gt;";
      table += "&lt;thead&gt;&lt;th&gt;Teacher's Name&lt;/th&gt;&lt;/thead&gt;&lt;tbody&gt;";
      for(var i = 0; i &lt; data.teacherinfo.length;i++)
      {
        table += "&lt;tr&gt;&lt;td&gt;&lt;a href='#teachermodal' data-toggle='modal' role='button' id='teachview' data-id='"
        +data.teacherinfo[i].teacherid+"'&gt;"
        +data.teacherinfo[i].FirstName+', '+data.teacherinfo[i].MiddleName+', '
        +data.teacherinfo[i].LastName+"&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
      }
      table += "&lt;/tbody&gt;&lt;/table&gt;";
    }
  
      $('#teacherTable').empty();
      $('#teacherTable').append(table);
  },
  });
  });
  </code></pre>
  
  <p>I want to display in the console log the data-id that is in the href to check if it passes the id correctly but I don't get any result from the console log....
   This is the click event for the anchor tag:</p>
  
  <pre><code>$(function(){
  $('#teachview').click(function(){
  var teachid = $(this).attr("data-id");
  console.log(teachid);
  });
  });
  </code></pre>