Jquery + dl 实现树
dt dd 其实是个很好用的标签,以前还没怎么发现.
说说这个例子里注意的地方:
1. append 方法的 事件传递
添加节点代码:
function AddTreeNodeSecond() { $(".select").each(function (i) { if (this.localName == "dd") { var value = $(this).text(); $(this).empty(); $(this).removeClass("select"); $(this).append($("<dl></dl>").append($("<dt>dt</dt>").click(selectNode).add($("<dd>dd</dd>").click(selectNode)))); } else if (this.localName == "dt") { //$(this).after($("<dd id=‘" + index + "‘>" + index + "</dd>").click(selectNode)); $(this).clone(false).after($("<dd id=‘" + index + "‘>" + index + "</dd>")); } });//end each }
2.元素选择代码
function selectNode(e) { if (e.target.localName != "dl") { if ($(e.target).hasClass("select")) { $(e.target).removeClass("select"); } else { $(e.target).addClass("select"); } //event 即为触发当前方法所包含的事件对象. var e = (event) ? event : window.event; if (window.event) { e.cancelBubble = true; } else { e.stopPropagation(); } } } //绑定dt ,dd 的click事件 $("dt,dd").click(selectNode);
$("dt,dd").click(selectNode) //初始化时,绑定click事件到selectNode方法.
之后选择添加子节点方法 AddTreeNodeSecond .使用append方法,将"<dl><dt></dt><dd></dd></dl>" 添加到 父级<dd></dd> 标签中.此时,使用append方法 会讲 父级的<dd></dd> 的click事件,传递给 刚添加的元素,造成 dl 也被绑定了.(注:这是我通过调试得出的结论,具体的理论依据并为找到.将会在稍后查找,并做补充)
2.事件冒泡.一个比较重要的问题,建议在进行附在的元素操作时加上此句
var e = (event) ? event : window.event; if (window.event) { e.cancelBubble = true;//ie取消事件冒泡 } else { e.stopPropagation();//其他浏览器 }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。