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();//其他浏览器
                }