javascript - 列出元素和 jquery

Question

我这里有这个代码:codepen link

基本上，列表项应该 react 的方式是添加的新元素(显示复选框的元素)应该像已经放置的列表项(点击时背景发生变化的元素)。计数也应该上升。我不知道为什么我当前的方法不起作用，因为它的编写方式与其他代码的编写方式相同...

代码:

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","输入[type='checkbox']",function(){