10

I have been stuck on this problem for the whole day! Basically, I have this array:

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:[...

Then I get values like this:

for(var i=0, l=Object.keys(category["id_"+(cat_id)]).length; i<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('<div class="category-list item-'+ cat_id + '_' + i +'"><img src="' + img + '"><p>' + title +'</p><p>€' + price + '</p></div>');

       //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);
        });
    };

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

Anybody has a solution? Thanks!

Improve this question
1
  • 3
    This look waaay too complicated.... Commented Dec 19, 2012 at 14:55

3 Answers 3

Reset to default
6

Let us make this easier on you.

They all use the same class: .category-list, so then add the category as a data element (data-cat='foo' and data-id='bar')

Then you can do:

$(document).on('click','.category-list', function(){
     var data = $(this).data();

     app.renderPageProductView(data.cat, data.id);
});

You can do something like this to set it all up:

for(id in category){
   for(var i = 0; i < category[id].length; ++i){
        var img = category[id][i]["img"];
        var title = category[id][i]["titolo"];
        var price = category[id][i]["prezzo"];

        $('#content').append('<div class="category-list" data-id="'+ i +'" data-cat="'+ id +'"><img src="' + img + '"><p>' + title +'</p><p>€' + price + '</p></div>');
   }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks @ExplosionPills dunno how i missed on
at first I thought there was some new jQuery construct I didn't know about.
0

Try storing the index into a data-attribute. The click is executed after your loop is done so I would be the max value.

Try this code:

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

   //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!
    $('.category-list').click(function(){
         app.renderPageProductView(cat_id, parseInt($(this).attr('data-index'), 10));
    });
Improve this answer

2 Comments

Why would you use attr to get the data attribute? Use data(...)!
I've knew that the click was executed after the loop was done, but i cuold'n figure out how to store i. Your answer solved my question, i understand it know. Mersi batke!
-1

After all of that can't you just do:

$(".item-1_1").off('click').on('click', function () {
   app.renderPageProductView(1,1);
});
Improve this answer

2 Comments

$('.item-' + cat_id + '_' + i) need to be called to add it for every div
where app.renderPageProductView(cat_id,i); and gets i=8, not 1