1

我在这里有这个代码：codepen 链接

基本上，列表项应该做出反应的方式是添加的新项（显示复选框的项）应该像已放置的列表项（单击时背景更改的项）。计数也应该上升。我不知道为什么我当前的方法不起作用，因为它的编写方式与其他代码相同......

代码：

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>

查询：

$(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");
                    }
                });
            });
4

2 回答 2

1

来吧：http: //codepen.io/anon/pen/Ilpqk

问题是 jquery.click()仅在加载文档时应用，因此插入的元素没有应用新类。改为使用.on()。

所以简而言之，我$("input[type='checkbox']").click(function(){改为$(document).on("click","input[type='checkbox']",function(){

于 2013-07-30T09:56:27.430 回答
1

您应该hide在输入复选框中添加类。这将隐藏复选框。

此外，您的事件绑定适用于已经存在的元素，不适用于动态添加的列表。

改变

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

至

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

这会将事件委托给父元素以监视对子选择器的点击。

于 2013-07-30T09:58:40.020 回答