jquery.on ('click', function() {...}); не сжигание

Question

Я в настоящее время (пытается) построить галерею фотографий для моего сайта. Поэтому, когда вы нажимаете на изображение, оно меняет размер на весь экран.

Проблема в том, что, когда она будет увеличена, мой jquery.on('click', function() {...}) не будет запускаться, и я не знаю почему.

Для простоты, вот мой демо: https://www.googledrive.com/host/0B2DQgwgiU8LZbGhsbkxjdlRpR3M/

В инспекторе браузера, вы можете увидеть index.html, style.css и, более specifictly, в script.js файл, который был проблема.

Спасибо, что помогли мне в моем посвящении с jQuery (javascript)!

Answer 1

попробовать это, потому что, когда вы назначаете событие щелчка img-container ДИВ не существует

$(document).on('click', '.img-container', function() { 

}); 

Answer 2

После каждого увеличения я подозреваю, что вы должны RETRIGGER

jquery.on('click', function() {...}) 

, как это, кажется, становится отменено после каждого увеличения.

Answer 3

Пожалуйста, в следующий раз укажите код ключа здесь, а не в файле диска, а для полного примера используйте что-то вроде codepen или jsfiddle. То, как вы делаете свой вопрос, требует много работы, чтобы просмотреть его и сделать рабочий пример, если вы сделаете jsfiddle, мне нужно только его изменить.

Вот рабочий пример: https://jsfiddle.net/7ouno09f/2/ или http://codepen.io/anon/pen/eNGqPg

$(function() { 

$('.photo-tiles img').each(function() 
    { 
     $(this).wrap('<div class="tile"><div class="image"></div></div>'); 

     if ($(this).width()/$(this).height() < 5/3) 
     { 
      $(this).addClass('width'); 
     } 
     else 
     { 
      $(this).addClass('height'); 
     } 
    }); 

    //Correct click syntax 
    $('.photo-tiles').on('click', 'img', function() 
    { 
     url = $(this).attr('src'); 
     caption = $(this).data('caption'); 
     if (caption == undefined) caption = ""; 

     $('<div class="img-container"><img src="' + url + '"><p class="caption">' + caption + '</p></div>') 
      .appendTo('body') 
      .velocity({ 
       opacity: 1 
      }, { 
       duration: 300 
      }); 
    }); 

    //You can't attach the event to the .img-container element because that is the element you're adding and removing. The event must be attached to a element that persis9t on all your flow, in this case, the body (because you're adding the new element to the end of the body 
    $('body').on('click', '.img-container', function() 
    { 
     var imgContainer = $(this); 
     imgContainer.velocity({ 
      opacity: 0 
     }, { 
      duration: 300, 
      complete: function() { 
       //Remove the clicked element on the completed animation 
       imgContainer.remove(); 
      } 
     }); 


    }); 
});