Jquery.load()引入重复js导致ztree不可用

转载请注明出处:jiq•钦's technical Blog

我的页面完成这样一个功能,点击页面左边的ZTree节点时利用jquery ajax请求后台action查询节点详细信息,然后在页面右边的div中利用Jquery的load函数加载节点的详细信息显示页面node.jsp。


备注:jquery load是jquery ajax中的一种功能,load可以方便快速的直接加载一个页面到指定div中,并且它可以带参数,load方法格式:
load(url,data,function(response,status,xhr))

<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-4">
				<div class="panel panel-info bootstrap-admin-no-table-panel">
					<div class="panel-heading">
				        <div class="text-muted bootstrap-admin-box-title">配置列表</div>
				    </div>
					<div class="left pre-scrollable" style="height:560px">
						<ul id="configZtree" class="ztree" style="width:700px; overflow:auto;"></ul>
					</div>
				</div>
			</div>
	        <div class="col-md-7">
	        	<div id="configInfo"></div>
	        </div>
	        <div class="col-md-1"></div>
		</div>	
	</div>                    
</body>

单击ztree节点的js响应函数:

//ztree单击事件 
    function zTreeOnClick(event, treeId, treeNode) {
    	if(treeNode.level != 0)
    	{
    		//alert(getPathText(treeNode));
	        $.ajax({
	            type: "POST",
	            url: "DispNodeInfo.action",
	            data: {nodeId:treeNode.id,nodeName:treeNode.name},
	            dataType: "json",
	            success: function(data) {
	                $("#configInfo").load("nodeInfo.jsp?data="+data);
	            },
	            error: function() {
	            	$("#configInfo").load("error.jsp");            	
	            }
	        }); 
    	}
    };

这些都能正常工作,然后我的焦点放到ztree节点上时会出现新增子节点的悬浮按钮,效果如下:

Jquery.load()引入重复js导致ztree不可用_第1张图片


这个按钮点击会去的div中的ztree对象,进行节点增加操作。

我直接聚焦并点击这个新增按钮没有任何问题,能正常新增子节点,但是当单击节点,让右边load节点详细信息之后,再去点击悬浮的新增字节点的按钮,则不起任何作用,并出现异常:


获取的ztree对象为空!!! 难道Jquery的load函数又问题???

于是我新增了一个空白的jsp页面来load,按照上面再操作一遍,发现能够正常新增,所以说是我这个node.jsp文件的问题,经过排查,发现是这个页面中再次引入了ztree的js文件的缘故:

<script type="text/javascript" src="JS/zTree/js/jquery.ztree.all-3.5.min.js"></script>

将其去掉,正常工作。

你可能感兴趣的:(Jquery.load()引入重复js导致ztree不可用)