Soft Reject - JS. Proper Event Binding



I have a question about proper event binding. How to implemet on my js?

PROPER EVENT BINDING: Consider using the preferred .on() method rather than .click(), .bind(), .hover(), etc.

!function($) {
    "use strict";

    var Page = function() {
        this.$topSection = $('#home-fullscreen'),
        this.$topNavbar = $("#navbar-menu"),
        this.$stickyElem = $("#sticky-nav"),
        this.$backToTop = $('#back-to-top'),
        this.$contactForm = $("#contact-form")

        /* ======= Stellar for background scrolling ======= */
        if ($('.parallax-bg').length > 0) {
            $('.parallax-bg').imagesLoaded( function() {

                    horizontalScrolling: false,
                    verticalOffset: 0,
                    horizontalOffset: 0,
                    responsive: true,
                    hideDistantElements: true
    // Prototype Get
    Page.prototype.init = function () {
        var $this = this;
        //window related event

        //Handling load event
        $(window).on('load', function() {
            var windowHeight = $(window).height();
            // adding height attr to top section
            $this.$topSection.css('height', windowHeight);

            //init sticky
            $this.$stickyElem.sticky({topSpacing: 0});

        //Handling the resize event
        $(window).on('resize', function() {
            var windowHeight = $(window).height();
            $this.$topSection.css('height', windowHeight);

        //Handling the scroll event
            if ($(this).scrollTop() > 100) {
            } else {

        //on click on navbar - Smooth Scroll To Anchor (requires jQuery Easing plugin)
        this.$topNavbar.on('click', function(event) {
            var $anchor = $(;
            if ($($anchor.attr('href')).length > 0 && $'a.nav-link')) {
                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top - 0
                }, 1500, 'easeInOutExpo');

        //back-to-top button
            $("html, body").animate({ scrollTop: 0 }, 1000);
            return false;

       // Owl Initialization
            autoplay: true,
    		navText: ["<i class='fa fa-caret-left'></i>","<i class='fa fa-caret-right'></i>" ],
            autoplayTimeout: 4000,
        //init contact app if contact form added in a page

    $.Page = new Page, $.Page.Constructor = Page

function($) {
    "use strict";

I really appreciate all your help


There is nothing wrong with your code, almost about event binding, I don’t know why reviewers continue to ask this.
On performance not change nothing. On compatibility not change nothing. And anyway you are using all the .on.

My advice is to resend it as it is now and ask more explanations.


I am also confused what parts I need to improve

I was not particularly expert with javascript.


Maybe that part. Try to use $(window).on( ‘scroll’, function(){


Hi sir ki-themes

Glad hear from you, now i try

Tanks for quick answer


Here you can also change to $backToTop.on('click', ...).


Very helpful, thank you very much for your help.

Tanks all best suggestion now jquery acceppted

But now problem on responsive, can anyone test my template

Please provide feedback to me.


Didn’t they add any screen-shot? There may be more



Your information is very helpful to me, thank you for your time


Tanks all my item no live