jQuery append onclick function
<p>I have been stuck on this problem for the whole day! Basically, I have this array:</p>

<pre><code>var category = {
    id_1:[
          {id:"1_1", img:"img/prodotti-categorie/test.jpeg", titolo:"Name", prezzo:"8,50", link:""},
          {id:"1_2", img:"img/prodotti-categorie/test.jpeg", titolo:"Name", prezzo:"7,00", link:""},
          {id:"1_3", img:"img/prodotti-categorie/test.jpeg", titolo:"Name", prezzo:"7,00", link:""},
          {id:"1_4", img:"img/prodotti-categorie/test.jpeg", titolo:"Name", prezzo:"19,00", link:""},
          {id:"1_5", img:"img/prodotti-categorie/test.jpeg", titolo:"Name", prezzo:"10,00", link:""},
          {id:"1_6", img:"img/prodotti-categorie/test.jpeg", titolo:"Name", prezzo:"8,50", link:""},
          {id:"1_7", img:"img/prodotti-categorie/test.jpeg", titolo:"Name", prezzo:"12,00", link:""},
          {id:"1_8", img:"img/prodotti-categorie/test.jpeg", titolo:"Name", prezzo:"7.50", link:""}],
    id_2:[...
</code></pre>

<p>Then I get values like this:</p>

<pre><code>for(var i=0, l=Object.keys(category["id_"+(cat_id)]).length; i&lt;l; i++) {
        var img = category["id_"+(cat_id)][i]["img"];
        var title = category["id_"+(cat_id)][i]["titolo"];
        var price = category["id_"+(cat_id)][i]["prezzo"];

        $('#content').append('&lt;div class="category-list item-'+ cat_id + '_' + i +'"&gt;&lt;img src="' + img + '"&gt;&lt;p&gt;' + title +'&lt;/p&gt;&lt;p&gt;€' + price + '&lt;/p&gt;&lt;/div&gt;');

       //From here begins my problem:
       //When i search fot the class added before and try to append or do anything else, variable i is always 8!
        $('.item-' + cat_id + '_' + i).click(function(){
             app.renderPageProductView(cat_id, i);
        });
    };
</code></pre>

<p>I need to append to every <code>&lt;div&gt;</code> element with a class such as <code>class="item-1_1"</code> a function on click <code>app.renderPageProductView(1,1);</code></p>

<p>Anybody has a solution?
Thanks!</p>
