Using HTML tag to carry customized attributes
<p>I need to make an ajax call to retrieve a list of items, each item will become an HTML element such as <code>&lt;li/&gt;</code> by using jQuery's <code>.html();</code> then a click on the <code>&lt;li/&gt;</code> will trigger a function with the data about the item.</p>

<p>The question is what is a better strategy to associate item data with the <code>&lt;li/&gt;</code>.</p>

<p>Currently I'm trying to make the item data a customized attribute to <code>&lt;li/&gt;</code>. </p>

<p>For example I'll create it as <code>&lt;li myattr='itemData'&gt;itemDisplayStr &lt;/li&gt;</code>. However I cannot get the data back in click event, as:</p>

<pre><code>$('li').click(function() {
    alert(this.myattr);
    alert(this.attr('myattr'));
    alert(this.attributes['myattr']);
});
</code></pre>

<p>None of above works.</p>

<p>Can anyone give me some clues?
Thanks</p>
