我现在出现的问题是第一个节点可以绑定contextMenu,但是当点击完此节点加载完其子节点后,右键菜单就失效了,请高手指教,如何在子节点动态加载后都能绑定contextMenu?如图,这是开始只有父节点时的效果图:
当我点击了父节点,加载完子节点后,再点击右键,则contextmenu失效了,我想动态地为每个节点添加contextmenu该怎么做?
js代码:
var l_tree = document.getElementById("l_tree_d");
var tree = new dTree("tree");//创建一个对象.
$(document).ready(function(){
$("#1").contextMenu('myMenu', {});
});
tree.add(0,-1,'MyTree')
//显示根节点
var jar = new Node(1,0,'JAR名',"javaScript:getMoreNodes('../treeNodes/NodesPrint','1');",'JAR名');
tree.aNodes[tree.aNodes.length] = jar;
jar._hc=true;
// 动态显示节点
function getMoreNodes(addr,pId){
$.ajax({
url:addr,
type:"POST", //数据发送方式
data:{"parentId":pId},
dataType:"xml", //接受数据格式
error:function(json){
alert( "not lived!");
},
async: false ,//同步方式
success: function(xml){
$(xml).find("node").each(function(){
var nodeId=$(this).attr("nodeId");
var parentId=$(this).attr("parentId");
var nodeType=$(this).attr("nodeType");
var addr=$(this).attr("address");
var nodeName=$(this).text();
var child = new Node(nodeId,parentId,nodeName,"javaScript:getMoreNodes('"+addr+"','"+nodeId+"')",nodeName);
tree.aNodes[tree.aNodes.length] = child;
if(nodeType == "0" ){
child._hc = true;
}
});
}
});
l_tree.innerHTML = tree;
}
document.write(tree);
jsp代码:
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
%>
<!-- 180px建议 -->
<!-- 树框架 -->
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css"
href="../dtree/dtree.css">
<script type="text/javascript"
src="../dtree/jquery-1.4.4.min.js"></script>
<script type="text/javascript"
src="../dtree/dtree.js"></script>
<script type="text/javascript"
src="../dtree/jquery.contextmenu.js"></script>
<script type="text/javascript">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
background-color: #D8E5F4;
}
-->
</style>
</HEAD>
<BODY>
<div id="l_tree_d">
<script type="text/javascript"
src="../dtree/showtree.js"></script>
</div>
<div>
<form action="../treeNodes/JarUpLoadServlet" method="post" enctype="multipart/form-data">
<input type="file" name="up">
<input type="submit" value="提交">
</form>
</div>
<div class="contextMenu" id="myMenu">
<ul>
<li id="add">
<a >添加节点</a>
</li>
<li id="update">
<a >修改节点</a>
</li>
<li id="delete">
<a >删除节点</a>
</li>
</ul>
</div>
</BODY>
</HTML>
js
------解决方案--------------------
设置innerHTML后重新绑定事件