title: jQuery undefined result with .attr() method
body: <p>I have a table where I want to get the value of <code>data-url</code> from within a <code>&lt;td&gt;</code>-tag. The content of the table gets first populated via <code>$.ajax GET</code>. Then I use the <code>complete</code>-function to log onto the console the values of <code>data-url</code>. The result is <code>undefined</code>. </p>
  
  <pre><code>$(document).ready(function(){
      $.ajax({ 
          type: "GET",
          cache: false,
          url: "http://localhost:80/server/api/v1/files",
          success: function(data){    
              if (data.error) {
                  console.log(data.error)
              } else {
                  $("#t1").append(data);        
  
              }
          },
          error: function(data){            
          },
          complete: function(data){                
              console.log( $('#t1 #f1').data('url') );
          }
      }); 
  </code></pre>
  
  <p>The table first looks like this:</p>
  
  <pre><code>&lt;table id="t1"&gt;&lt;/table&gt; 
  </code></pre>
  
  <p>After the Ajax call it looks like this:</p>
  
  <pre><code>&lt;table id="t1"&gt;
    &lt;tr&gt;
      &lt;th&gt;
        Name
      &lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;a id="f1" data-url="test" href="/Logo.jpg"&gt;...&lt;/a&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>What could be the correct way to get the value of <code>data-url</code> in your oppinion?</p>