CODEWITHSUNDEEP
javascriptjquery
user1202826
user1202826

Reputation:

jQuery append onclick function

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!

Upvotes: 10

Views: 5658

Answers (3)

Naftali
Naftali

Reputation: 146310

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

Upvotes: 6

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

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

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

After all of that can't you just do:

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

Upvotes: -1

Related Questions