类似评论、点评的JS标签选择功能（及jq动态绑定事件）

最新推荐文章于 2022-05-20 07:45:00 发布

南郭未末

最新推荐文章于 2022-05-20 07:45:00 发布

阅读量1.2k

点赞数

分类专栏： jquery 文章标签： jq动态绑定事件 JS标签选择功能

本文链接：https://blog.csdn.net/ybb350680013/article/details/42006503

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jq 绑定事件，ajax加载的元素不需要再绑定也可用

$('父元素选择器').on('click','子元素选择器',function(){
})

$('#list').delegate('li', 'click', function() {
//function code here.
});

运用实例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类似评论、点评的JS标签选择功能</title>
<script src="jquery-1.10.2.js" type="text/javascript"></script>

<style>
.sel_div{padding:10px;border: 1px solid red;clear:both;margin:20px;width:500px;height:50px;}
.dd{float:left; padding:5px 10px; text-align:center; border:1px solid #eee; margin:10px; float:left; font-size:12px; cursor:pointer }
.dd:hover{background-color:#eee;}
.sel_div .dd{background-color:#eee;}
</style>
</head>
<body>
<div id="selOld">
	<label id="1" class="dd">一</label>
	<label id="2" class="dd">二</label>
	<label id="3" class="dd">三</label>
	<label id="5" class="dd">五</label>
	<label id="11" class="dd">十一</label>
</div>


<div id="selLable" class="sel_div">

</div>


<script >
$(function(){
$("#selOld").on("click",".dd",function(){
	if($("#selLable").find("#"+this.id).length>0){
		//取消
		$("#selLable #"+this.id).remove();
	}else{
		//选定
		$("#selLable").append(this.outerHTML);
	}
	//测试动态添加 Lable
	$("#selOld").append('<label id="12" class="dd">十二</label>');
	
	})
});
</script>
</body>
</html>

南郭未末

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
类似评论、点评的JS标签选择功能（及jq动态绑定事件）

jq 绑定事件，ajax加载的元素不需要再绑定也可用$('父元素选择器').on('click','子元素选择器',function(){})$('#list').delegate('li', 'click', function() {//function code here.});运用实例：类似评论、点评的JS标签选择功能.sel
复制链接

扫一扫