Soft Rejected For Proper Event Binding


#1

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

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

"use strict";

//Document ready
$(document).ready(function() {

	/********************************
	    - Hide player on mobile -
	********************************/
	if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
		$(".player").hide();
    	$(".player-controls").hide();
	}
	
	/*****************
		- Loader -
	*****************/
	$(".page-loader .loader .label > span").each(function() {
		var text = $(this);
		var words = text.data("words").split("|");
		var i, j = 0, word;
		var len = words.length;
		
		for (i=0; i<len; i++) {
			text.append($("<span />", {text:words[i]}));
			word = text.find("span");
			if (i>0) {word.hide();}
		}
		
		function anim() {
			text.animate({
				width:word.eq(j).width()
			});
			
			word.stop().fadeOut()
				.eq(j).fadeIn()
				.delay(750).show(0, anim);
			
			j = ++j % len;
		}
		
		anim();
	});
	
	/********************
		- Countdown -
	********************/
	if ($(".countdown").length>0) {
		$(".countdown").flipTimer({
			date:"2019/12/25 20:30:00",
			dayTextNumber:"auto",
			borderRadius:3,
			bgColor:"#fff",
			dividerColor:"#666",
			digitColor:"#333",
			textColor:"#fff",
			boxShadow:false
		});
	}
	
	/********************
	    - Animation -
	********************/
	$("[data-animation]").addClass('animated');
	
	$("[data-animation]").each(function(i, el) {
      	var delay = $(el).data("delay") || 0;
      
		if ($(window).width()<768) {
        	delay = 0;
      	}
		
		$(el).appear(function() {
			setTimeout(function() {
				$(el).addClass("animated").addClass($(el).data("animation"));
			}, delay);
       	}, {accX:0, accY:0});
    });
	
	/*******************
	    - Counters -
	*******************/
	$(".counter").appear(function() {
      	var counter = $(this).find(".number-count");
      	var toCount = counter.data("count");
      	var delay = $(this).data("delay") || 0;

      	setTimeout(
        	function() {
          		$(counter).countTo({
            		from:0,
            		to:toCount,
            		speed:1000,
            		refreshInterval:50,
          		});
        	},
        	delay
      	);
    });
	
	/********************
		- Up button -
	********************/
	$('.up-btn').on("click", function() {
		$(window).scrollTo($('body'), 1500, {offset:{top:0, left:0}});
	});
	
	/********************
	    - Subscribe -
	********************/
	$("#notifyMe").notifyMe();

    /***********************
	    - Contact form -
	***********************/
    $("#submit").on("click", function() {
		//Validate and process form 
    	$("#ajax-contact-form").validate({
			rules:{			
				name:{
					required:true,
				},
							
				email:{
					required:true,
					email:true,
				},
							
				message:{
					required:true,
				},
			},
			
			messages:{			
				name:{
					required:"<i class='fa fa-exclamation-triangle name'></i>",
				},
			
				email:{
					required:"<i class='fa fa-exclamation-triangle email'></i>",
					email:"<i class='fa fa-exclamation-triangle email'></i>",
				},
			
				message:{
					required:"<i class='fa fa-exclamation-triangle message'></i>",
				},
			
			},

            //Submit form
           	submitHandler:function(form) {
				//Result text
				var result = "";
				
		 		//Create variables from the form
		 		var name = $('input#name').val(); 
		 		var email = $('input#email').val();  
				var message = $('textarea#message').val();

               	//Create variables that will be sent in a URL string to contact.php
              	var dataString = '&name='+name+'&email='+email+'&message='+message;
        		
				$.ajax({
                	type:"POST",
                   	url:"php/contact.php",
                    data:dataString,
                    success:function(data) {
                    	if(data==="ok") { 
							$("#ajax-contact-form").find('input[type=text], input[type=email], textarea').val(""); 
							result = '<div class="notification_ok"><i class="fa fa-check"></i> Your email was sent. Thanks!</div>';
                       	} else {
                        	result = data;
                        }
                        
						$("#note").html(result).fadeIn();
           			}                         
              	});
					  
				return false;
        	}
		});
    });

	/*************************
	    - Youtube player -
	*************************/
    $(".player").mb_YTPlayer();
    
   	//Player controls
    $('#play').on("click", function(){
    	$('.player').playYTP();
	});

  	$('#pause').on("click", function(){
    	$('.player').pauseYTP();
	});
	
	//Google Maps
	googleMaps();
	
});

/**********************
	- Window load -
**********************/
$(window).on("load", function() {
    $(".page-loader").delay(300).fadeOut("slow");
});

/**********************
	- Google Maps -
**********************/
function googleMaps() {
	if ($('#google-container').length===0) {
		return;
	}
	
	//Variables
	var title = arrMap.title;
	var latitude = arrMap.latitude;
	var longitude = arrMap.longitude;
	var zoom = arrMap.zoom;
	
	//Marker icon
	var marker_url = arrMap.marker;
	
	//Main color
	var main_color = arrMap.color;
	
	//Saturation and brightness
	var saturation_value = -20;
	var brightness_value = 5;

	//Map style
	var style= [ 
		{//Set saturation for the labels on the map
			elementType:"labels",
			stylers:[
				{saturation:saturation_value},
			]
		}, 
		
		{//Poi stands for point of interest - don't show these labels on the map 
			featureType:"poi",
			elementType:"labels",
			stylers:[
				{visibility:"off"},
			]
		},
		
		{//Hide highways labels on the map
			featureType:'road.highway',
			elementType:'labels',
			stylers:[
				{visibility:"off"},
			]
		}, 
	
		{//Hide local road labels on the map
			featureType:"road.local", 
			elementType:"labels.icon", 
			stylers:[
				{visibility:"off"}, 
			] 
		},
		
		{//Hide arterial road labels on the map
			featureType:"road.arterial", 
			elementType:"labels.icon", 
			stylers:[
				{visibility:"off"},
			] 
		},
	
		{//Hide road labels on the map
			featureType:"road",
			elementType:"geometry.stroke",
			stylers:[
				{visibility:"off"},
			]
		},
		
		{//Style different elements on the map
			featureType:"transit", 
			elementType:"geometry.fill", 
			stylers:[
				{hue:main_color},
				{visibility:"on"}, 
				{lightness:brightness_value}, 
				{saturation:saturation_value},
			]
		}, 
		
		{
			featureType:"poi",
			elementType:"geometry.fill",
			stylers:[
				{hue:main_color},
				{visibility:"on"}, 
				{lightness:brightness_value}, 
				{saturation:saturation_value},
			]
		},
		
		{
			featureType:"poi.government",
			elementType:"geometry.fill",
			stylers:[
				{hue:main_color},
				{visibility:"on"}, 
				{lightness:brightness_value}, 
				{saturation:saturation_value},
			]
		},
		
		{
			featureType:"poi.sport_complex",
			elementType:"geometry.fill",
			stylers:[
				{hue:main_color},
				{visibility:"on"}, 
				{lightness:brightness_value}, 
				{saturation:saturation_value},
			]
		},
		
		{
			featureType:"poi.attraction",
			elementType:"geometry.fill",
			stylers:[
				{hue:main_color},
				{visibility:"on"}, 
				{lightness:brightness_value}, 
				{saturation:saturation_value},
			]
		},
		
		{
			featureType:"poi.business",
			elementType:"geometry.fill",
			stylers:[
				{hue:main_color},
				{visibility:"on"}, 
				{lightness:brightness_value}, 
				{saturation:saturation_value},
			]
		},
		
		{
			featureType:"transit",
			elementType:"geometry.fill",
			stylers:[
				{hue:main_color},
				{visibility:"on"}, 
				{lightness:brightness_value}, 
				{saturation:saturation_value},
			]
		},
		
		{
			featureType:"transit.station",
			elementType:"geometry.fill",
			stylers:[
				{hue:main_color},
				{visibility:"on"}, 
				{lightness:brightness_value}, 
				{saturation:saturation_value},
			]
		},
		
		{
			featureType:"landscape",
			stylers:[
				{hue:main_color},
				{visibility:"on"}, 
				{lightness:brightness_value}, 
				{saturation:saturation_value},
			]	
		},
		
		{
			featureType:"road",
			elementType:"geometry.fill",
			stylers:[
				{hue:main_color},
				{visibility:"on"}, 
				{lightness:brightness_value}, 
				{saturation:saturation_value},
			]
		},
	
		{
			featureType:"road.highway",
			elementType:"geometry.fill",
			stylers:[
				{hue:main_color},
				{visibility:"on"}, 
				{lightness:brightness_value}, 
				{saturation:saturation_value},
			]
		},
		
		{
			featureType:"water",
			elementType:"geometry",
			stylers:[
				{hue:main_color},
				{visibility:"on"}, 
				{lightness:brightness_value}, 
				{saturation:saturation_value},
			]
		}
	];
	
	//Set google map options
	var map_options = {
		center:new google.maps.LatLng(latitude, longitude),
		zoom:zoom,
		panControl:false,
		zoomControl:false,
		mapTypeControl:false,
		streetViewControl:false,
		mapTypeId:google.maps.MapTypeId.ROADMAP,
		scrollwheel:false,
		styles:style
	};
	
	//Inizialize the map
	var map = new google.maps.Map(document.getElementById("google-container"), map_options);
 
	//Add a custom marker to the map        
	var marker = new google.maps.Marker({
		position:new google.maps.LatLng(latitude, longitude),
		map:map,
		title:title,
		visible:true,
		icon:marker_url
	});

	google.maps.event.addDomListener(window, "resize", function() {
		var center = map.getCenter();
		google.maps.event.trigger(map, "resize");
		map.setCenter(center); 
	});

	//Add custom buttons for the zoom-in/zoom-out on the map
	if (arrMap.zoomControlDiv==undefined) {		
		var zoomControlDiv = document.createElement("div");		
		var zoomControl = new customZoomControl(zoomControlDiv, map);
		arrMap.zoomControlDiv = zoomControlDiv;
	}
		
	//Insert the zoom div on the top left of the map
	map.controls[google.maps.ControlPosition.LEFT_TOP].push(arrMap.zoomControlDiv);
}

function customZoomControl(controlDiv, map) {
	//Grap the zoom elements from the DOM and insert them in the map 
	var controlUIzoomIn = document.getElementById("zoom-in"),
	controlUIzoomOut = document.getElementById("zoom-out");
  
	controlDiv.appendChild(controlUIzoomIn);
	controlDiv.appendChild(controlUIzoomOut);

	//Setup the click event listeners and zoom-in or out according to the clicked element
	google.maps.event.addDomListener(controlUIzoomIn, "click", function() {
		map.setZoom(map.getZoom()+1);
	});
	
	google.maps.event.addDomListener(controlUIzoomOut, "click", function() {
		map.setZoom(map.getZoom()-1);
	});
}

#2

I removed (document).ready. I think, Envato reviewers don’t want “.ready” function anymore.


#3

It should be:

$(document).on('ready', function() {