Jquery实现类别的动态选择与删除_jquery 动态类-优快云博客

本文介绍了如何使用jQuery实现类别的动态选择与删除功能。通过Bootrap的label, panel 和 glyphicon样式，配合jQuery的on方法处理动态添加的元素。特别强调了在jQuery1.7后，live方法被移除，需要使用on方法并结合$(document)来监听动态生成的节点的点击事件。" 111757362,9909189,Python实现最小二乘法回归性检测,"['Python', '数据科学', '统计模型', '机器学习', '线性回归']

用jquery实现角色的动态选择与删除。效果如下图。利用了Bootrap的label, panel 和glyphicon样式。

第一步：实现页面的显示

<div class="panel panel-default">
//选中的角色
<div class="panel-heading panel-info">
<span style="white-space:pre">	</span><ul id="selectrole" class="list-inline">
<span style="white-space:pre">		</span><li><span class="label label-success">selected</span><span
<span style="white-space:pre">			</span>class="glyphicon glyphicon-remove" style="cursor: pointer;"></span></li>
<span style="white-space:pre">	</span></ul>
</div>
//待选择的角色
<div class="panel-body">
<span style="white-space:pre">	</span><ul id="unselectrole" class="list-inline">
<span style="white-space:pre">		</span><c:if test="${not empty roles}">
<span style="white-space:pre">			</span><c:forEach items="${roles}" var="role">
<span style="white-space:pre">				</span><li><span>${role.roleName}</span><span
<span style="white-space:pre">					</span>class="glyphicon glyphicon-plus" style="cursor: pointer;"></span></li>
<span style="white-space:pre">			</span></c:forEach>
<span style="white-space:pre">		</span></c:if>
<span style="white-space:pre">	</span></ul>
</div>
</div>

第二步，实现点击的动态选择与删除

	//将选中角色放回到待选框中
	$(document).on('click', '.glyphicon-plus', function() {
		var link=$(this);
		var apptext = "<li><span class='label label-success'>" + link.prev().html() + "</span><span class='glyphicon glyphicon-remove' style='cursor: pointer;'></span></li>";
		$('#selectrole').append(apptext);
		link=link.parent("li");
		link.remove();
	});
	
	//将待选角色放到选择框内
	$(document).on('click', '.glyphicon-remove', function() {
		var link=$(this);
		var apptext = "<li><span>" + link.prev().html() + "</span><span class='glyphicon glyphicon-plus' style='cursor: pointer;'></span></li>";
		$('#unselectrole').append(apptext);
		link=link.parent("li");
		link.remove();
	});

注意事项：

因涉及到动态增加html代码，juqery的click 和 bind绑定不再可用。而且jquery1.7版本之后取消了live()方法。因此采用on方法。但跟live的区别是on方法需用$(document)作为主体，然后在后面添加筛选。$(document).on('click', '.glyphicon-remove', function() {}；

如果直接使用$('.glyphicon-remove').on('click', ,function() {}；对动态添加的节点仍然不可用。