//需求:在一个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);
               }
            }
         }
      });
   }