Soft Reject - JS. Proper Event Binding

html
themeforest

#1

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() {

            	$(window).stellar({
                    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
        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $this.$backToTop.fadeIn();
            } else {
                $this.$backToTop.fadeOut();
            }
        }); 

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

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



       // Owl Initialization
        $('.owl-carousel').owlCarousel({
            loop:true,
            margin:10,
            nav:true,
            autoplay: true,
    		navText: ["<i class='fa fa-caret-left'></i>","<i class='fa fa-caret-right'></i>" ],
            autoplayTimeout: 4000,
            responsive:{
                        0:{
                            items:1
                        }
                    }
        });
				
				
        //init contact app if contact form added in a page
        if(this.$contactForm.length>0)
            $.ContactForm.init();

    },
    //init
    $.Page = new Page, $.Page.Constructor = Page
}(window.jQuery),

				
//initializing
function($) {
    "use strict";
    $.Page.init()
}(window.jQuery);

I really appreciate all your help


#2

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.


#3

I am also confused what parts I need to improve

I was not particularly expert with javascript.


#4

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


#5

Hi sir ki-themes

Glad hear from you, now i try

Tanks for quick answer


#6

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


#7

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 http://theme-demo.jawanet.com/lutfi-lite/

Please provide feedback to me.


#8

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


#9

Hi

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


#10

Tanks all my item no live