javascript - Item soft rejected due to Proper Event Binding issue -
an item i've submitted themeforest.net got soft rejected following message:
proper event binding: consider using preferred .on() method rather .click(), .bind(), .hover(), etc. best performance , concise code use event delegation whenever possible
i have no idea , appreciate help.
this 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"); // search within 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 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); }); });
so change event listener assignments following:
$('.search').click(function(e) { $(".search-overlay").addclass("visible"); e.preventdefault(); }); ...to use corresponding on method instead, passing event name argument:
$('.search').on("click", function(e) { $(".search-overlay").addclass("visible"); e.preventdefault(); }); event delegation avoiding adding several event listeners specific nodes , instead adding single event listener common parent element, looks see child element clicked on.
there's article here: https://www.google.co.uk/amp/s/davidwalsh.name/event-delegate/amp
Comments
Post a Comment