CODEWITHSUNDEEP
javascriptjqueryhtml
user2166059
user2166059

Reputation: 35

Making image gallery, undefined is not a function?

I'm using a tutorial to create an image gallery and it gives me an error on line 31 of the js file. Not familiar with jQuery language so I thought the code might be out of date. Tried using the migrate plugin and it still doesn't work. On the jQuery site it says .live() was removed and to use .on() instead but not sure how to do that. html file:

   <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 file:

$(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');
}
});

Upvotes: 0

Views: 197

Answers (1)

matthias_h
matthias_h

Reputation: 11416

Adjusting live() to on() can be done as follows: currently you have a statement like this: 

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

and, as you already found out, live() is deprecated as of jQuery version 1.7.

Adjusting this to on() means to let the static navbar delegate the click event to a tags that are children of the navbar, even if they are added later:

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

The on() is bound to an element that is already in the DOM when the page is loaded and delegates events to child elements even if they are dynamically added later.

For reference: http://api.jquery.com/on/

Upvotes: 2

Related Questions