Data attribute is returning undefined
<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>