項目軟拒絕，由於正確的事件綁定問題

Question

我已經提交給themeforest.net得到柔軟以下消息拒絕一個項目：

合適的事件綁定：考慮使用的首選。對（）方法，而不是。點擊（），.bind（），.hover（）等。爲了獲得最佳性能和簡潔的代碼，儘可能使用事件代理

我不知道該怎麼做，並希望得到一些幫助。

這是我的代碼（這是相當長的對不起）：

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

所以，你會改變事件偵聽器分配如下所示：

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

...對使用相應的方法，將事件名稱作爲參數傳遞：

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

事件委託會避免將多個事件偵聽器添加到特定節點，而是將單個事件偵聽器添加到公共父元素，然後查看哪個子元素被點擊。

有一個很好的文章在這裏： https://www.google.co.uk/amp/s/davidwalsh.name/event-delegate/amp