jquery.on('click', function() {...}); 不開火

Question

我目前正在（嘗試）為我的網站構建一個照片圖塊庫。 因此，當您單擊圖像時，它會將其大小調整為整個屏幕。

問題是一旦縮放，我的jquery.on('click', function() {...})不會觸發，我不知道為什么。

為簡單起見，這是我的演示： https : //www.googledrive.com/host/0B2DQgwgiU8LZbGhsbkxjdlRpR3M/

在瀏覽器的檢查器中，您可以看到index.html 、 style.css ，更具體地說，是問題所在的script.js文件。

感謝您幫助我開始使用 jQuery (javascript)！

Answer 1

試試這個，因為當你分配點擊事件img-container div 不存在

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

 });

Answer 2

下次請在此處提供關鍵代碼，而不是在驅動器文件中，對於完整示例，請使用 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();
            }
        });


    });
});

Answer 3

每次縮放后，我懷疑您必須重新觸發

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

因為每次縮放后它似乎都被取消了。