自动生成的图像不可点击

Auto-Generated images are not clickable

本文关键字：图像 自动生成      更新时间：2023-09-26

我的网页上有4张图片，当我点击其中一张时，点击的图片会突出显示。我使用这个实现：

JS1:

var ImageSelector = function() {
  var imgs = null;
  var selImg = null;
  return {
     addImages: function(container) {
        imgs = container.getElementsByTagName("img");
        for(var i = 0, len = imgs.length; i < len; i++) {
           var img = imgs[i];
           img.className = "normal";
           img.onclick = function()  {
              if(selImg)   {
                 selImg.className = "normal";
              }
              this.className = "highlighted";
              selImg = this;
              urlSet(this.src);
           };
        }
     }
  };
}();

js2:

var div = document.getElementById("menu");
ImageSelector.addImages(div);

CSS：

   .normal {
      border:none;
   }
   .highlighted {
     border:8px solid #19A3FF;
   }

我插入了一个jQuery代码，它显示文件夹中的所有图像，它是这样的：

var dir = "images/";
var fileextension = ".jpg";
$.ajax({
    //This will retrieve the contents of the folder if the folder is configured as 'browsable'
    url: dir,
    success: function (data) {
        //Lsit all png file names in the page
        $(data).find("a:contains(" + fileextension + ")").each(function () {
            var filename = this.href.replace(window.location, "").replace("http://example.com/", "");
            $(".menu").append($("<img src=" + dir + filename + " width=300 height=300>"));
        });
    }
});

HTML代码是这样的：

    <div>
        <div id="menu" class = "menu">
</div></div>

当我插入jQuery代码时，图像会显示出来，但不能再点击了。如何使它们再次可点击？谢谢

Mohit Arora-在附加图像或使用委派后的成功事件中调用函数ImageSelector。

我会解释为什么，这是因为你在加载图像之前设置了.onclick函数。ajax调用是在代码之后执行的，因为ajax是异步的。如果您想将任何东西挂接到您通过ajax调用的东西，请始终在success事件中执行。

相关文章：