列出项目和jquery
List items and jquery
我这里有这个代码: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>
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");
}
});
});
开始吧:http://codepen.io/anon/pen/Ilpqk
问题是,jquery .click()
仅在加载文档时应用,因此插入的元素没有应用新的类。请改用.on()
。
简而言之,我将$("input[type='checkbox']").click(function(){
更改为$(document).on("click","input[type='checkbox']",function(){
您应该将hide
类添加到您的输入复选框中。这将隐藏复选框。
此外,您的事件绑定是针对已经存在的元素的,不会应用于动态添加的列表。
更改
$("input[type='checkbox']").click(function(){
// your code
});
至
$('.list-unstyled').on('click', 'input[type="checkbox"], function(){
// your code
});
这将把事件委托给父元素来监视点击子选择器。
相关文章:
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 学生搜索项目jquery/javascript
- 无法在jquery中向上或向下移动列表中的多个项目
- 使用jQuery插入HTML页面的第一个项目缺少结束标记
- 使用JavaScript或jQuery检查单选按钮选择是否与数组中的项目匹配
- JQuery和Javascript没有'在我的项目中不起作用,但在网络上起作用
- jQuery:根据select选项中的每页项目进行分页
- 我在页面中使用的jQuery UI可排序项目;不起作用
- 如何使用jquery将所选项目从一个下拉组列表(optgroup)移动到另一个下拉列表(optgroup)
- jQuery无限循环,动画化许多项目
- 如何让li项目在这个jQuery列表中滑动和/或淡出视图
- 根据jQuery针对特定项目
- 在此项目中使用jQuery或JavaScript中的选择器
- jquery ias插件不适用于我的网站,加载更多项目不起作用
- 为图像滑块jquery添加项目符号功能
- 第一个jquery项目-在函数中使用处理程序来模块化它们
- 第一个JQuery项目..有点卡住了
- 如何检查PHP和jquery项目中代码重定向的位置
- 将我的Jquery项目更改为纯javascript
- JQuery项目.视图中的ID