PROPER EVENT BINDING:

PROPER EVENT BINDING:

Please somebody help me with this? i don't know what to do?

PROPER EVENT BINDING: Consider using the preferred .on() method rather than .click(), .bind(), .hover(), etc. For best performance and concise code use event delegation whenever possible:

Here is my code:

$(document).ready(function($) {
"use strict";


//Initiat WOW JS
    new WOW().init();

//Smooth Anchor Tag
$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

// Back-to-top
        $(document).ready(function () {
            // body...
            var btt = $('.back-to-top');

            btt.on('click', function() {
                $('html, body').animate({
                    scrollTop: 0
                }, 600);
            });

            $(window).on('scroll',function() {
                var self = $(this),
                height = self.height(),
                top = self.scrollTop();

                if (top > height) {
                    if (!btt.is(':visible')) {
                        btt.show();
                    }
                }   else {
                        btt.hide();
                    }
            });
        });

        //Color Switcher
        var colorSheets = [
            {
                color: "#cb1627",
                title: "Switch to Default",
                href: "./css/colors/color-default.css"
            },
            {
                color: "#2fcc3d",
                title: "Switch to Green",
                href: "./css/colors/color-green.css"
            },
            {
                color: "#2daccc",
                title: "Switch to Blue",
                href: "./css/colors/color-blue.css"
            },
            {
                color: "#ff4800",
                title: "Switch to Magenta",
                href: "./css/colors/color-magenta.css"
            }
        ];

        ColorSwitcher.init(colorSheets); 

        //data-filter
        $(document).ready(function(){

    $(".filter-button").click(function(){
        var value = $(this).attr('data-filter');
        
        if(value == "all")
        {
            //$('.filter').removeClass('hidden');
            $('.filter').show('1000');
        }
        else
        {
//            $('.filter[filter-item="'+value+'"]').removeClass('hidden');
//            $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
            $(".filter").not('.'+value).hide('3000');
            $('.filter').filter('.'+value).show('3000');
            
        }
    });
    
        if ($(".filter-button").removeClass("active")) {
    $(this).removeClass("active");
    }
    $(this).addClass("active");

    });
});