jquery.on('点击',function(){...});不开火

时间:2015-06-22 14:30:32

标签: javascript jquery

我目前(正在尝试)为我的网站构建照片图库。因此,当您单击图像时,它会将其调整为整个屏幕。

问题是,一旦缩放,我的jquery.on('click', function() {...})不会触发,我也不知道为什么。

为简单起见,这是我的演示: https://www.googledrive.com/host/0B2DQgwgiU8LZbGhsbkxjdlRpR3M/

在浏览器的检查器中,您可以看到index.htmlstyle.css,更具体地说,可以看到问题所在的script.js文件。

感谢您帮助我开始使用jQuery(javascript)!

3 个答案:

答案 0 :(得分:3)

试试这个,因为当您指定点击事件img-container div不存在时

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

 });

答案 1 :(得分:1)

请在下次提供密钥代码,而不是在驱动器文件中,并且完整示例请使用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();
            }
        });


    });
});

答案 2 :(得分:-1)

每次放大后我都怀疑你必须重新触发

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

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