Question

我提交给themeforest.net的一个项目因以下消息被软拒绝了：

正确的事件绑定：考虑使用首选的.on（）方法而不是.click（）,. 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();
});

...使用相应的 on 方法，将事件名称作为参数传递：

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

事件委托避免向特定节点添加多个事件侦听器，而是将一个事件侦听器添加到公共父元素，然后查看哪个子元素被单击。

这里有一篇好文章： https://www.google.co.uk/amp/s/davidwalsh.name/event-delegate/amp

由于正确的事件绑定问题，项目软件被拒绝

1 个答案: