항목은 부드러운 때문에 적절한 이벤트가 문제를

Question

부드러운 다음과 같은 메시지가 거부있어 내가 themeforest.net에 제출 한 항목을 바인딩 거부 :

올바른 이벤트 바인딩 :보다는 선호 CSTE 연구진() 메소드를 사용하는 것이 좋습니다. 최상의 성능과 간결한 코드를 위해 가능한 경우 언제든지 이벤트 위임을 사용하십시오.

저는 실제로 무엇을해야하는지 잘 모르며 도움이됩니다.

이

은 (꽤 오래 미안) 내 코드입니다 : ...

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

에 해당 을 사용 :

이

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').on("click", function(e) { 
    $(".search-overlay").addClass("visible"); 
    e.preventDefault(); 
}); 

이벤트 위임을 통해 여러 이벤트 리스너를 특정 노드에 추가하지 않고 하나의 이벤트 수신기를 공통 부모 요소에 추가하면 어떤 자식 요소가 클릭되었는지 확인할 수 있습니다.

여기에 좋은 기사가있다 : https://www.google.co.uk/amp/s/davidwalsh.name/event-delegate/amp