createlemen时t触发onClick事件的问题
//需求：在一个DIV（可能有多个类似的DIV）里面实现ajax翻页。//实现思路：点击翻页，获取数据后，删除该div下的所有元素，然后将需要显示的商品单元逐一填入。详细代码如下。
//问题：点击翻页，获取数据后，可以删除div下的所有元素，同时也可以将商品单元逐一填入，但是会同时触发商品单元内的onclick事件。百思不得其解。望高手给予解惑。
/********** 详细代码部分 ***********/
//html片段
<div>
<div>
此处是翻页按钮区域，主要是控制翻页显示的代码，不详述。
仅使用一个关键方法：onClick="javaScript:topage("+(p+1)+","+IPage+",'"+key+"')"
</div>
<div id="<%=key%>" class="contents">
<!-- 一个完整的商品展示单元 -->
<DIV style="left: <%=left %>px; top: 9px;" class="commodity_column">
<img src="image/test.gif" class="commodity_column_pic" onClick="openCommodity('<%=bean.getBusinessid()%>');"/>
<span class="commodity_name" onClick="javaScript:openCommodity('<%=bean.getBusinessid()%>');">
<%=bean.getC_brand()+bean.getC_categories()+" "+bean.getC_model()%>
</span>
<span class="commodity_property">
<%=bean.getCommodityp1()%>
</span>
<span class="commodity_provider">
<%=bean.getCommprovider()%>
</span>
<span class="commodity_property">
报名结束日期：<%=bean.getApplyendtime()%>
</span>
</DIV>
<!-- 一个完整的商品展示单元 end-->
</div>
</div>
//相关的js代码。
/*为一个元素对象赋予事件响应，以及处理该事件的逻辑。
*参数：
* obj：目标元素。
* evt：事件[如：click，dblClick等]
* fn：处理该事件的function
*/
function addEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}
/**
* 向指定容器添加一个完整的商品展示单元。
* parentID：容器id
* no：单元位置编号
* date：单元数据内容，一个数组对象。
*/
function addPart(parentID,no,date){
var parent = Get(parentID);
if(parent){
var c_div = document.createElement("div");
c_div.setAttribute("id",date[0]);
c_div.className="commodity_column";
c_div.style.top="9px";
c_div.style.left=(no*205)+"px";
var cImg = document.createElement("img");
c_div.setAttribute("id",date[0]+"_img");
cImg.src="commoditys/"+date[0]+"/"+date[1];
cImg.className="commodity_column_pic";
var cName = document.createElement("span");
c_div.setAttribute("id",date[0]+"_name");
cName.className="commodity_name";
cName.innerHTML=date[2];
var cPropert = document.createElement("span");
cPropert.className="commodity_property";
cPropert.innerHTML=date[3];
var cProvider = document.createElement("span");
cProvider.className="commodity_provider";
cProvider.innerHTML=date[4];
var cEndtime = document.createElement("span");
cEndtime.className="commodity_property";
cEndtime.innerHTML=date[5];
var fg1 = document.createElement("br");
var fg2 = document.createElement("br");
var fg3 = document.createElement("br");
c_div.appendChild(cImg);
c_div.appendChild(cName);
c_div.appendChild(fg1);
c_div.appendChild(cPropert);
c_div.appendChild(fg2);
c_div.appendChild(cProvider);
c_div.appendChild(fg3);
c_div.appendChild(cEndtime);
parent.appendChild(c_div);
addEventSimple(cImg,"click",openCommodity(date[0]));
addEventSimple(cName,"click",openCommodity(date[0]));
}
}
/**
* 翻页总体方法。
* 描述：从后台获取内容数据（一个字符串），经过前台的切割变成多个商品信息。
* pageNO 需要访问的页面
* allPage 总共页面
* key 属于哪一类商品
*/
function topage(pageNO,allPage,key){
if(pageNO>=allPage){
return;
}else{
//访问后台得到需要的数据。
var url = "ajaxService.do?method=getActivitiesByPage&pageNO="+pageNO+"&key="+key;
var responset;
ajaxCheck(url,'', function(responseText){
//alert(responseText);
responset = responseText;
if(responseText.search("error")>=0){
}else{
//删除key容器下所有商品
var parentNode = Get(key);
clearAllNode(parentNode);
var area = responseText.split("#");
if(area.length>0){
var nowPage = area[area.length-1]
for(var i=0;i<area.length-1;i++){
var activeInfo = area[i].split("*");
addPart(key,i,activeInfo);
}
}
}
});
}
