使图像库未定义不是一个函数

Making image gallery, undefined is not a function?

本文关键字：一个 函数 图像 未定义      更新时间：2023-09-26

我正在使用教程来创建图像库，它在 js 文件的第 31 行给我一个错误。不熟悉jQuery语言，所以我认为代码可能已经过时了。尝试使用迁移插件，但仍然不起作用。在jQuery网站上，它说.live（）被删除并使用.on（）代替，但不确定如何做到这一点。html 文件：

   <body>
        <header>
            <div class="container">
            <nav id="navbar"></nav>
            </div>
        </header>
        <section id="main">
            <div class="container">
                <ul id="gallery">
                    <li data-tags="Web Design, Logo Design, Print Design"><a class="fancybox" rel="group" href="img/1.jpg"><img src="img/1.jpg"></a></li>
                    <li data-tags="Logo Design"><a class="fancybox" rel="group" href="img/2.jpg"><img src="img/2.jpg"></a></li>
                    <li data-tags="Web Design"><a class="fancybox" rel="group" href="img/3.jpg"><img src="img/3.jpg"></a></li>
                    <li data-tags="Print Design"><a class="fancybox" rel="group" href="img/4.jpg"><img src="img/4.jpg"></a></li>
                    <li data-tags="Logo Design, Print Design"><a class="fancybox" rel="group" href="img/5.jpg"><img src="img/5.jpg"></a></li>
                </ul>
            </div>
            <hr>
            <footer>
                <div class="container">
                    <p></p>
                </div>
            </footer>
        </section>
        <script src="js/jquery.js"></script>
        <script src="js/jquery.quicksand.js"></script>
        <script src="js/fancybox/jquery.fancybox.pack.js"></script>
        <script src="js/fancybox/jquery.fancybox-buttons.js"></script>
        <script src="js/fancybox/jquery.fancybox-media.js"></script>
        <script src="js/fancybox/jquery.fancybox-thumbs.js"></script>           
        <script src="js/script.js"></script>
        <script>
            $(document).ready(function(){
                $(".fancybox").fancybox();
            });
        </script>
   </body>

JavaScript 文件：

$(document).ready(function(){
var items = $('gallery li'),
    itemsByTags = {};
items.each(function(i){
    var elem = $(this),
    tags = elem.data('tags').split(',');
    elem.attr('data-id',i);
    $.each(tags,function(key,value){
        value= $.trim(value);
        if(!(value in itemsByTags)){
            itemsByTags[value] = [];
        }
        //add image to array
        itemsByTags[value].push(elem);
    });
});
//create all items option
createList('All Items', items);
$.each(itemsByTags, function(k, v){
    createList(k, v);
});
//click handler
$('#navbar a').live('click',function(e){
    var link = $(this);
    //add active class
    link.addClass('active').siblings().removeClass('active');
    $('#gallery').quicksand(link.data('list').find('li'));
    e.preventDefault();
});
$('#navbar a:first').click();
//create the lists
function createList(text,items){
    var ul = $('<ul>',{'class':'hidden'});
    $.each(items, function(){
        $(this).clone().appendTo(ul);                      
    });
    ul.appendTo('#gallery');
    var a = $('<a>',{
        html:text,
        href:'#',
        data:{list:ul}
    }).appendTo('#navbar');
}
});

live()调整为on()可以按如下方式完成： 目前你有这样的语句： 

$('#navbar a').live('click',function(e){ ...

而且，正如您已经发现的那样，live()从 jQuery 版本 1.7 开始被弃用。

将其调整为 on() 意味着让静态navbar将click事件委托给作为navbar子项的a标签，即使它们是稍后添加的：

$('#navbar').on('click', 'a', function(e){..

加载页面时，on()绑定到 DOM 中已有的元素，并将事件委托给子元素，即使它们稍后是动态添加的。

供参考：http://api.jquery.com/on/

相关文章：