title: Data attribute is returning undefined
body: <p>I am using jQuery to set a data attribute <code>filtername</code> on an onClick which works fine.</p>
  
  <pre><code>$('#tag-group ul').append('&lt;li&gt;&lt;i class="fa fa-times" aria-hidden="true" data-filtergroup="'+filterGroup+'" data-filtername="'+filterName+'"&gt;&lt;/i&gt;'+text+'&lt;/li&gt;');
  </code></pre>
  
  <p>It renders out on the screen ok as </p>
  
  <pre><code>&lt;li&gt;&lt;i class="fa fa-times" aria-hidden="true" data-filtergroup="location" data-filtername="Melbourne"&gt;&lt;/i&gt; Melbourne&lt;/li&gt;
  </code></pre>
  
  <p>I am then trying to pick it up again on another onClick but it comes back as undefined. When I <code>console log $(this).text();</code> it works but when I console log <code>$(this).data('filtername');</code> it is undefined. Is the dom hiding it if it is generated by jQuery?</p>
  
  <pre><code>$(document).on('click','#sau-filter-tags ul li', function(event){
              var text = $(this).text();
              var filterName = $(this).data('filtername');
              console.log(filterName);  //Undefined
          });
  </code></pre>