Liste des articles et jquery

Question

J'ai ce code ici: codepen link

Fondamentalement, la façon dont les éléments de liste réagissions est que les nouveaux éléments ajoutés (ceux avec la case à cocher montrant) devraient être comme la liste déjà placée item (celui que l'arrière-plan change quand on clique). Le compte devrait également monter. Je ne sais pas pourquoi ma méthode actuelle ne fonctionne pas, comme il est écrit de la même façon l'autre code est ...

CODE:

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

Here ya go: http://codepen.io/anon/pen/Ilpqk

problème était que le jquery .click() n'est appliqué que lorsque le document a été chargé, de sorte que les éléments insérés n'ont pas reçu la nouvelle classe. utilisez .on() à la place.

Donc en bref, j'ai changé $("input[type='checkbox']").click(function(){ à $(document).on("click","input[type='checkbox']",function(){

Answer 2

Vous devez ajouter hide classe à votre case d'entrée. Cela masquera la case à cocher.

Votre liaison d'événement s'applique également à l'élément déjà présent et ne s'applique pas à la liste ajoutée dynamiquement.

changement

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

à

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

ce déléguera l'événement à l'élément parent à surveiller le clic sur sélecteur d'enfant.