title: Jquery is not identifying custom anchor tag attributes
body: <p>I have a jquery function that is building dynamic html code from calling a php script the html is output using </p>
  
  <pre><code> $('ul.special-list').append("&lt;li&gt;&lt;a href='#' class=restaurantItem  restaurant= '" + item.estName + "' adddress='" + item.estAddr + "'&gt;&lt;img src= " + item.img_link + 
              " width='60' height='60' alt='" + item.estName + "'&gt;&lt;div class='img-det'&gt;&lt;strong class='title'&gt; " + item.title + " &lt;/strong&gt;&lt;p&gt; " + item.desc_short +
              " &lt;br&gt;Expires: " + item.expiry_date + " &lt;/p&gt;&lt;em class='price'&gt;" + item.price + "&lt;/em&gt;&lt;/div&gt;&lt;/a&gt;&lt;a href='dealDetail.html?id=" + item.id +
              "' class='det-link'&gt;Detail&lt;/a&gt;");
  </code></pre>
  
  <p>I then have a function that is called on doument.ready the function is called correctly but the value of the custom anchor tag - restaurant is not shown with an alert.</p>
  
  <pre><code>$('ul.special-list').on('click', 'a.restaurantItem', function (event) {
  
      event.preventDefault();
      alert($(this).attr('address'));
   } 
  </code></pre>
  
  <p>The alert shows undefined even though when i inspect the element in chrome the element restaurant on the  tag has a value.</p>
  
  <p>Any help would be great, im quite new to Jquery so any help would be appreciated.</p>
  
  <p>Many Thanks</p>