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() {...})

因为它似乎在每次变焦后都会被撤消。

jquery.on（＆＃39;点击＆＃39;，function（）{...}）;不开火

3 个答案: