0

I have this for loop used to fill html div using JQuery:

for (i = 0; i < count; i++) {
                //console.log(condizioniList[i]);
                var $pendenzaHTML = $("<div class='row no-gutter rigaPagamenti' id=''> <div class='col-10 checkbox-container'> <label class='label-checkbox item-content'> <input type='checkbox' name='my-checkbox'  class='checkbox' value=''> <div class='item-media'> <i class='icon icon-form-checkbox'></i></div></label></div> <div class='col-80' id=''><p class='titoloPendenza'></p><p class='scadenza'></p><p class='importo'></p></div></div>");

                $pendenzaHTML.prop("id", "pendenza"+i);
                $pendenzaHTML.find(".col-80").prop("id", "colItem"+i);
                $pendenzaHTML.find(".col-80 > .titoloPendenza").text(condizioniList[i].descrTributo);
                $pendenzaHTML.find(".col-80 > .scadenza").text("Scadenza: " + condizioniList[i].scadenza);
                $pendenzaHTML.find(".col-80 > .importo").text(condizioniList[i].importo +"€");
                $( "#lista-pendenze" ).append($pendenzaHTML);

                $("#colItem"+i).on("click", function(){
                    console.log('.picker-' + i);
                    myApp.pickerModal('.picker-' + i);
                    $(this).parent().css("background-color","#969696");
                    $(".col-80").not(this).parent().css("background-color","#bfbfbf");
                    //console.log('.picker-'+ condizioniList[i].pickerNumber);
                });
            }
      }

I would like to set different click events for each item with different id, like this: #colItem0 onclick will open modal with class .picker-0, #colItem1 will open .picker-1 and so on. In this way all divs will open .picker-3 (count = 3). How can i get this working?

slash89mf
  • 1,057
  • 2
  • 13
  • 35
  • I disagree with the closure of this question – stackoverfloweth Mar 30 '17 at 13:02
  • @stackoverfloweth my opinion too. Do you know how could i solve my problem? – slash89mf Mar 30 '17 at 13:07
  • my guess was that the timing wasn't right, the logic looks fine. try using this `$(document).on("click", "#colItem" + i, function(){` instead of `$("#colItem"+i).on("click", function(){` – stackoverfloweth Mar 30 '17 at 13:08
  • @stackoverfloweth i have the same problem, console.log shows me .picker-3 because in that moment (at the end of the for loop, when onclick is executed) the value of i = 3 – slash89mf Mar 30 '17 at 13:11

0 Answers0