Question

我正在使用教程来创建图库，它在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');
}
});

Answer 1

将live()调整为on()可以按如下方式进行：目前您的声明如下：

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

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

将其调整为on()意味着让静态navbar将click事件委托给a的{{1}}个子代码，即使他们是稍后添加：

navbar

$('#navbar').on('click', 'a', function(e){..绑定到加载页面时已存在于DOM中的元素，并将事件委托给子元素，即使它们稍后动态添加也是如此。

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

制作图库，未定义不是一个功能？

1 个答案: