Item soft rejected due to Proper Event Binding issue

Question

An item I've submitted to themeforest.net got soft rejected with the following message:

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

I have no idea what to do actually and would appreciate some help.

This is my code (it’s quite long sorry):

jQuery(document).ready(function($) {

  "use strict";

  // PRELOADER
  $(window).load(function() {
    $('#preloader').fadeOut('slow', function() {
      $(this).remove();
    });
  });


  // NAV BR RESIZING
  $(document).on("scroll", function() {
    if ($(document).scrollTop() > 50) {
      $("header").removeClass("large").addClass("small");
    } else {
      $("header").removeClass("small").addClass("large");
    }
  });


  // MOBILE MENU TRIGGER
  $('.menu-item').addClass('menu-trigger');
  $('.menu-trigger').click(function() {
    $('#menu-trigger').toggleClass('clicked');
    $('.container').toggleClass('push');
    $('.pushmenu').toggleClass('open');
  });


  // SEARCH
  $('.search').click(function(e) {
    $(".search-overlay").addClass("visible");
    e.preventDefault();
  });
  $('.close-search').click(function(e) {
    $(".search-overlay").removeClass("visible");
    e.preventDefault();
  });


  // FOUNDATION INITIALIZER
  $(document).foundation();


  // LIGHTCASE
  $('a[data-rel^=lightcase]').lightcase({
    showSequenceInfo: false,
  });


  // CONTDOWN
  $('[data-countdown]').each(function() {
    var $this = $(this),
      finalDate = $(this).data('countdown');
    $this.countdown(finalDate, function(event) {
      $this.html(event.strftime('' +
        '<span class="time">%D <span>days</span></span> ' +
        '<span class="time">%H <span>hr</span></span> ' +
        '<span class="time">%M <span>min</span></span> ' +
        '<span class="time">%S <span>sec</span></span>'));
    });
  });


  // SCROLLDOWN BUTTON
  $(".show-scrolldown-btn").append("<div class='scrolldown-btn reveal-from-bottom'></div>")
  $('.scrolldown-btn').on('click', function() {
    var ele = $(this).closest("div");
    // this will search within the section
    $("html, body").animate({
      scrollTop: $(ele).offset().top + 70
    }, 500);
    return false;
  });


  // ISOTOPE MASONRY
  $(window).load(function() {
    var $container = $('.grid');
    $container.isotope({
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
    });
    var $optionSets = $('.filter'),
      $optionLinks = $optionSets.find('a');
    $optionLinks.click(function() {
      var $this = $(this);
      if ($this.hasClass('active')) {
        return false;
      }
      var $optionSet = $this.parents('.filter');
      $optionSet.find('.active').removeClass('active');
      $this.addClass('active');
      // make option object dynamically, i.e. { filter: '.my-filter-class' }
      var options = {},
        key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');
      value = value === 'false' ? false : value;
      options[key] = value;
      if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
        changeLayoutMode($this, options);
      } else {
        $container.isotope(options);
      }
      return false;
    });
  });


  //BACK TO TOP
  var offset = 300,
    offset_opacity = 1200,
    scroll_top_duration = 700,
    $back_to_top = $('.backtotop');
  $(window).scroll(function() {
    ($(this).scrollTop() > offset) ? $back_to_top.addClass('is-visible'): $back_to_top.removeClass('is-visible fade-out');
    if ($(this).scrollTop() > offset_opacity) {
      $back_to_top.addClass('fade-out');
    }
  });
  $back_to_top.on('click', function(event) {
    event.preventDefault();
    $('body,html').animate({
      scrollTop: 0,
    }, scroll_top_duration);
  });
});

Answer 1

So you would change event listener assignments like the following:

$('.search').click(function(e) {
  $(".search-overlay").addClass("visible");
  e.preventDefault();
});

...to use the corresponding on method instead, passing the event name as an argument:

$('.search').on("click", function(e) {
  $(".search-overlay").addClass("visible");
  e.preventDefault();
});

Event delegation is avoiding adding several event listeners to specific nodes and instead adding a single event listener to a common parent element, which then looks to see which child element was clicked on.

There's a good article here: https://www.google.co.uk/amp/s/davidwalsh.name/event-delegate/amp