자동 생성 이미지를 클릭 할 수 없습니다.

Question

내 웹 페이지에 4 개의 이미지가 있습니다. 그 중 하나를 클릭하면 클릭 한 이미지가 강조 표시됩니다. I 이것을 사용 달성한다

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); 
      }; 
     } 
    } 
    }; 
}(); 

JS 2

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

CSS : I 폴더에 사진을 표시하는 jQuery 코드를 삽입 한

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

이는 다음과 같습니다.

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 코드는 이것이다 : 나는 jQuery 코드는 이미지가 표시하지만 클릭 더 이상되는 삽입

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

. 다시 클릭 할 수있게하려면 어떻게해야합니까? 감사.

Answer 1

Mohit Arora - 이미지를 추가하거나 위임을 사용하면 성공 이벤트에서 ImageSelector 함수를 호출하십시오.

왜 이미지가로드되기 전에 .onclick 기능을 설정했는지 설명합니다. ajax 호출은 asjax이기 때문에 코드 뒤에 실행됩니다. 아약스를 통해 호출 한 무언가에 무언가를 연결하려면 항상 succes 이벤트에서 수행하십시오.