问题遇到的现象和发生背景
背景:有一个网页需要改造,原有显示方式为查询后,后台传数据进来并只展示1条数据。现需要展示多条数据,并且每条数据包含2个部分,1部分为显示部分,显示数据基本信息,2部分为详细隐藏部分,当鼠标点击1部分基本信息时,在1部分基本信息下面实现显示/隐藏。后台传过来的数据没法确定多少条,所以在后台拼网页的时候用for循环拼。
当信息直接写死在jsp页面上时,用this.next().toggle();方法可以实现点击隐藏\显示事件,但是当从后台传数据回来,有数据,但是没有点击效果。
怀疑时动态添加元素的时候没有绑定到事件。在jsp页面上用.live的方法也没能实现。
用代码块功能插入代码,请勿粘贴截图
JSP页面部分代码=======================
<script>
var processBar;
function onInit(){
if(typeof(initProcess)!='undefined'){
initProcess();
}
}
function query(obj){
var queryMode ="1";
var ajax = new Ajax();
var url = "../../Test";
var method = "POST"
var params = queryMode;
var result = ajax.loadSyncXMLHttpRequest(url,method,params);
}
</script>
<body onload='onInit()'>
<input type ="buttton" onclick="query(this)"/>
<div id = "lmtInfo">
</div>
后端拼网页代码========================
private void Test(HttpServletRequest request,HttpServletResponse response){
java.io.PrintWriter out = null;
out = response.getWriter();
StringBuffer sb = new StringBuffer();
sb.append("<FIELDSET><LEGEND>测试信息</LEGEND>"
+"<div>"
+"<table class\"showValue\" >"
+"<tr><td>显示1</td></tr>"
+"</table>"
+"<table class\"hideValue\" >"
+"<tr><td>隐藏1</td></tr>"
+"</table>"
+"</div>"
</FIELDSET>");
}
ajax代码===============================
var result = httpRequest.responseText;
var ret = result.split("|");
var lmtInfoDiv = document.getElementById("lmtInfo");
if(ret[1]!=null){
lmtInfoDiv.innerHtml = ret[1];
}