img onclick Feuer js Funktion nur zweiter Klick

Question

Auf html Seite habe ich mehrere Bilder mit <img onclick="povecaj();" In der Tat, versucht, eine Art Lichtkasten zu machen. Zuerst img klicken Sie nicht arbeiten, zweite Klick gefeuert Funktion und andere img ersten Klick gefeuert Funktion. Aber nach Seite geladen Faust img Klick funktioniert nicht ...

Funktion ist weiter:

function povecaj() { 

     if (document.readyState === "complete") { 
      if ((screen.width > 801) || (screen.height > 801)) { 
       init(); 
      } 
      else { 
       return; 
      } 
     } 

    } 


    function init() { 
     $(' .card-img img').click(function() { 
      var thediv = document.getElementById('displaybox'); 
      var staza = $(this).attr('src') 
      var sl = document.getElementById('image'); 
      thediv.style.display = ""; 
      sl.innerHTML = '<img alt="2" id="imgID" src="' + staza + '"/>' + '<div class="alert-close" onclick = "zapri()" >X</div>' 
      thediv.innerHTML = '<table style="width:100%; height:100%;"><tbody><tr><td style="text-align: center; vertical-align:central; width:100%; height:100%"></td></tr></tbody></table>'; 
      thediv.style.display = "block"; 
      sl.style = "block"; 

     }); 
    } 

Ich bin in VS2012, arbeiten mit Chrome zu überprüfen .. können Fehler nicht sehen .. Gesucht, gegoogelt, kann keine Lösung finden. Kann jemand helfen?

Answer 1

Wenn Ihre Bilder dynamisch die DOM Laden Sie ein jquery Event-Listener wie folgt hinzufügen:

function init() { 
     $(class_of_parent_div).on('click', '.card-img img', function() { 
      var thediv = document.getElementById('displaybox'); 
      var staza = $(this).attr('src') 
      var sl = document.getElementById('image'); 
      thediv.style.display = ""; 
      sl.innerHTML = '<img alt="2" id="imgID" src="' + staza + '"/>' + '<div class="alert-close" onclick = "zapri()" >X</div>' 
      thediv.innerHTML = '<table style="width:100%; height:100%;"><tbody><tr><td style="text-align: center; vertical-align:central; width:100%; height:100%"></td></tr></tbody></table>'; 
      thediv.style.display = "block"; 
      sl.style = "block"; 

     }); 
    } 

Und schreiben die Klasse der Eltern div class_of_parent_div