javascript - addEventListener 始终指向所有 addEventListener 元素的最后一个元素或 id 或对象

Question

问题代码

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

我使用 addEventListener 来防止 anchor 标记的默认操作。它运行良好，但我的问题是 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.  

Answer 1

(因为我无法发表评论所以回答)

我看不到您的所有代码，但我假设您正在使用某种循环来迭代名为 setarr 的数组。您需要在循环的每次迭代中创建一个闭包，否则每次迭代的局部变量将等于函数终止时的局部变量。

在此处了解有关关闭的更多信息:https://developer.mozilla.org/en/docs/Web/JavaScript/Closures