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

来源：互联网发布：美的和格力空调知乎编辑：程序博客网时间：2024/06/05 12:45

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 0