элементы списка и JQuery

Question

У меня есть этот код здесь: codepen link

В принципе, путь элементы списка должны реагировать в том, что новые элементы, которые добавляются (те, с флажком, показывая) должно быть, как уже помещен список item (тот, который изменяется при щелчке фона). Счет также должен расти. Я не знаю, почему мой текущий метод не работает, так как она написана так же, как другой код ...

КОД:

HTML:

<div class='navbar navbar-fixed-bottom'> 
      <div class='col-lg-3 col-offset-2 pull-left'> 
       <form class="navbar-form pull-left"> 
        <div class="input-group"> 
         <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> 
         <input type="text" class="form-control" name="filtr" id="filtr" placeholder="Search.."> 
        </div> 
       </form> 
      </div> 
      <div class='container'> 
       <a class='navbar-brand' href='#'></a> 
       <ul class='nav navbar-nav pull-right'> 
        <li><a href='#' class='count'><strong>0</strong></a></li> 
        <li><a href='#'><i class="glyphicon glyphicon-align-justify"></i></a></li> 
        <li><a href='#'>Next Step <i class="glyphicon glyphicon-chevron-right v-align-middle"></i></a></li> 
       </ul> 
      </div> 
     </div> 
     <div class='contains'> 
      <ul class='list-unstyled' id="productlist"> 
       <label for="addbox"><li class="products" id="addbox">+ NON-STOCKED ITEM</li></label> 
       <label for="nonitem"><li class='products NON-STOCKED0'>NON-STOCKED ITEM<input class="hide" type="checkbox" id="nonitem" value="NON-STOCKED ITEM"><span class='selectedbox pull-right large-icon'><i class="glyphicon glyphicon-ok"></i></span></li></label> 
        <span id='newbox'></span> 
      </ul> 
    </div> 

JQuery:

$(function(){ 
       var count = 0; 
       var newdiv = $("#newbox"); 
       var nonitem = $("#nonitem") 
       var a = $(nonitem).size() + 1; 
       var b = $(nonitem).size() + 1; 

       a = a -1; 
       b = b -1; 

       $("#addbox").click(function(){ 
        $("<label for='nonitem"+a+"' id='chk'><li class='products NON-STOCKED'>NON-STOCKED ITEM<input class='' type='checkbox' id='nonitem"+b+"' value='NON-STOCKED ITEM'></li></label>").appendTo(newdiv); 
        a++; 
        b++; 
        return false; 
       }); 

       $("input[type='checkbox']").click(function(){ 
        $(this).parent().toggleClass("backchange"); 
        $(this).next(".selectedbox").fadeToggle(); 
        var check = this.checked? 1 : -1; 
        count = count + check; 
        $(".count").text(count); 
        if(count >= 1){ 
         $(".clearall").fadeIn(); 
         $(".count").addClass("countplus"); 
        }else{ 
         $(".clearall").fadeOut(); 
         $(".count").removeClass("countplus"); 
        } 
       }); 
      }); 

Answer 1

Здесь я пойти: http://codepen.io/anon/pen/Ilpqk

Проблема в том, что JQuery .click() применяется только при загрузке документа, поэтому вставленные элементы не получили новый класс. вместо этого используйте .on().

Короче говоря, я изменил $("input[type='checkbox']").click(function(){ к $(document).on("click","input[type='checkbox']",function(){

Answer 2

Вы должны добавить hide класс в свой входной флажком. Это скроет флажок.

Также привязка к событию относится к уже существующему элементу и не будет применяться к динамически добавленному списку.

изменение

$("input[type='checkbox']").click(function(){ 
// your code 
}); 

в

$('.list-unstyled').on('click', 'input[type="checkbox"], function(){ 
// your code 
}); 

это будет делегировать событие родительского элемента, чтобы наблюдать за щелчком на селекторе ребенка.