event delegation

Please 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");

});

});