的addEventListener總是指向最後一個元素或ID objcet所有的addEventListener元素

問題代碼的addEventListener總是指向最後一個元素或ID objcet所有的addEventListener元素

var el = document.getElementById("searchcharm_'"+touch_id+"'"); 
    el.addEventListener('click', function(e){ 
     e.preventDefault(); 
     openpopup("'"+popupurl+"'"); 
     sendpym("'"+touch_id+"'"); 
     });

我已經使用的addEventListener防止錨標記的默認操作。它運行良好，但我的問題是addEventListener始終指向頁面中所有元素的最後一個元素或id或objcet。例如，如果我在頁面中有10個圖像並帶有10個不同的ID，則即使點擊其他圖像，添加列表程序也會始終指向最後一張圖像的ID。

整個代碼

var imgurl = "http:"+lcurl+touch_id+".jpg"; 
       var data = "<div id=charm_"+touch_id+" data-charmid="+touch_id+" data-vis="+bgid+" data-vid="+seid+" data-vtitle="+vtitle_url+" data-title="+title_url+" style='float:left;' class='mdl-cell mdl-cell--4-col charm-wrapper'>\n\ 
       <div class='mdl-card-wrapper charm-inner'>\n\ 
        <div class='demo-card-wide mdl-card mdl-shadow--8dp'>\n\ 
         <div class='mdl-card__media'>\n\ 
         "+locicon+"\n\ 
         <a href='"+popupurl+"' id = searchcharm_'"+touch_id+"'>\n\ 
         <div style='position:relative;'>\n\ 
         <div style='position:absolute;z-index:9;right:0px;bottom:0px;'><img width=32px src="+cf_assets+"img/hanger.png></div>\n\ 
         <div id=imagearea_"+touch_id+" title='"+title+"' class='imagearea loading'>\n\ 
         </div></div></a>\n\ 
        </div>\n\ 
          <div class='mdl-card__title'>\n\ 
        <div class='right-charm'>\n\ 
        <div class='social-share'>\n\ 
        "+copycontent+"\n\ 
        "+watsapp+"\n\ 
          <a onclick=sharetofb('"+ct_domain+socialshare_url+"'); title='Facebook' id=fb"+touch_id+" \n\ 
        class='fb_share'></a>\n\ 
       <a onclick=sharetotwitter('"+ct_domain+socialshare_url+"'); title='Twitter' id=tw"+touch_id+" class='tw_share'> </a>\n\ 
          </div>\n\ 
          </div>\n\ 
          <div class='icharm'>\n\ 
         <h2 class='mdl-card__title-text'>"+subtitle+"</h2>\n\ 
         <div class='mdl-card__subtitle-text'>"+title+"</div>\n\ 
         <div id=vid_"+touch_id+" class='mdl-card__subtitle-videoname'>"+videoname+"</div>\n\ 
         </div>\n\ 
         </div>\n\ 
         </div>\n\ 
        </div>\n\ 
       </div>"; 
     $('#main-home-page-inner').add(HTML(data)); 
      callcloudinary(imgurl,title,touch_id); 
      callmasonry(); 

     if(i == setarr.length-1){ 


     localStorage.touchids=touchid_arr.join(","); 
     localStorage.searchresults=gcharmarr.join(","); 
    } 

     var el = document.getElementById("searchcharm_'"+touch_id+"'"); 
    el.addEventListener('click', function(e){ 
     e.preventDefault(); 
     openpopup("'"+popupurl+"'"); 
     sendpym("'"+touch_id+"'"); 
     }); 

    // document.getElementById("main-home-page-inner").innerHTML += html; 

    } 
    /* document.getElementById("fb"+touch_id).setAttribute("onclick","sharetofb('"+title+"','"+text+"','"+ct_domain+socialshare_url+"','"+social_domain+lcurl+touch_id+".jpg')");*/ 
    } 

      }) 
      .error(function(status, statusText, responseText) { 
       //console.log(statusText); 
       //console.log(responseText); 
      }); 


    Kindly help.

來源

2016-06-21 sudan kanakavel