Невозможно отправить форму из-за скрипта jQuery

Я работаю над веб-сайтом, на котором реализованы некоторые сценарии jQuery. После создания нескольких простых форм я не смог отправить ни одну из них. Нажимаю отправить и ничего не происходит. После долгой отладки я понял, что причиной этого является скрипт, который я включил.

Это библиотека с открытым исходным кодом: https://markgoodyear.com/2013/01/scrollup-jquery-plugin/.

Каждый раз, когда я комментирую этот скрипт, форма отправляется и работает правильно. Как только я его включаю, форма ничего не делает.

Кто-нибудь знает, что может быть причиной этого?

Я включил код скрипта в jsfiddle: https://jsfiddle.net/ahje91r0/1/

(function($, window, document) {
  'use strict';

  $.fn.scrollUp = function(options) {
    if (!$.data(document.body, 'scrollUp')) {
      $.data(document.body, 'scrollUp', true);
      $.fn.scrollUp.init(options);
    }
  };

  $.fn.scrollUp.init = function(options) {
    var o = $.fn.scrollUp.settings = $.extend({}, $.fn.scrollUp.defaults, options),
      triggerVisible = false,
      animIn,
      animOut, animSpeed, scrollDis, scrollEvent, scrollTarget, $self;

    if (o.scrollTrigger) {
      $self = $(o.scrollTrigger);
    } else {
      $self = $('<a/>', {
        id: o.scrollName,
        href: '#top'
      });
    }

    if (o.scrollTitle) {
      $self.attr('title', o.scrollTitle);
    }

    $self.appendTo('body');
    if (!(o.scrollImg || o.scrollTrigger)) {
      $self.html(o.scrollText);
    }

    $self.css({
      display: 'none',
      position: 'fixed',
      zIndex: o.zIndex
    });

    if (o.activeOverlay) {
      $('<div/>', {
        id: o.scrollName + '-active'
      }).css({
        position: 'absolute',
        'top': o.scrollDistance + 'px',
        width: '100%',
        borderTop: '1px dotted' + o.activeOverlay,
        zIndex: o.zIndex
      }).appendTo('body');
    }

    switch (o.animation) {
      case 'fade':
        animIn = 'fadeIn';
        animOut = 'fadeOut';
        animSpeed = o.animationSpeed;
        break;
      case 'slide':
        animIn = 'slideDown';
        animOut = 'slideUp';
        animSpeed = o.animationSpeed;
        break;
      default:
        animIn = 'show';
        animOut = 'hide';
        animSpeed = 0;
    }

    if (o.scrollFrom === 'top') {
      scrollDis = o.scrollDistance;
    } else {
      scrollDis = $(document).height() - $(window).height() - o.scrollDistance;
    }

    scrollEvent = $(window).scroll(function() {
      if ($(window).scrollTop() > scrollDis) {
        if (!triggerVisible) {
          $self[animIn](animSpeed);
          triggerVisible = true;
        }
      } else {
        if (triggerVisible) {
          $self[animOut](animSpeed);
          triggerVisible = false;
        }
      }
    });

    if (o.scrollTarget) {
      if (typeof o.scrollTarget === 'number') {
        scrollTarget = o.scrollTarget;
      } else if (typeof o.scrollTarget === 'string') {
        scrollTarget = Math.floor($(o.scrollTarget).offset().top);
      }
    } else {
      scrollTarget = 0;
    }

    $self.click(function(e) {
      e.preventDefault();
      $('html, body').animate({
        scrollTop: scrollTarget
      }, o.scrollSpeed, o.easingType);
    });
  };

  $.fn.scrollUp.defaults = {
    scrollName: 'scrollUp',
    scrollDistance: 300,
    scrollFrom: 'top',
    scrollSpeed: 300,
    easingType: 'linear',
    animation: 'fade',
    animationSpeed: 200,
    scrollTrigger: false,
    scrollTarget: false,
    scrollText: 'Scroll to top',
    scrollTitle: false,
    scrollImg: false,
    activeOverlay: false,
    zIndex: 2147483647
  };

  $.fn.scrollUp.destroy = function(scrollEvent) {
    $.removeData(document.body, 'scrollUp');
    $('#' + $.fn.scrollUp.settings.scrollName).remove();
    $('#' + $.fn.scrollUp.settings.scrollName + '-active').remove();
    if ($.fn.jquery.split('.')[1] >= 7) {
      $(window).off('scroll', scrollEvent);
    } else {
      $(window).unbind('scroll', scrollEvent);
    }
  };

  $.scrollUp = $.fn.scrollUp;
})(jQuery, window, document);

Откройте консоль в браузере (нажмите F12), затем отправьте форму и проверьте наличие ошибок. Если вы видите некоторые из них, отредактируйте вопрос, чтобы включить их.

Rory McCrossan 08.04.2019 18:20

Также обратите внимание, что проблема, скорее всего, будет связана с использованием вами библиотеки выше, так как сама по себе в ее логике нет ошибок.

Rory McCrossan 08.04.2019 18:22

@RoryMcCrossan Я сделал. К сожалению, ничего не происходит. Никакой перезагрузки страницы, никаких ошибок, это как нажатие отключенной кнопки. Очень сбивает с толку, так как когда я удаляю скрипт, он работает правильно.

souleatzz 08.04.2019 18:22
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
3
42
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, что этот плагин предотвращает событие click в строке #100:

$self.click(function(e) {
  e.preventDefault();
  /...

Итак, попробуйте остановить распространение события от кнопки отправки формы к $self плагина, который, вероятно, является body... Вот так:

$("form [type='submit']").on("click", function(e){
  e.stopPropagation();
});

Это сработало. Спасибо большое. Я добавил код, который вы написали. Также строка в app.js делала то же самое. Еще раз спасибо.

souleatzz 08.04.2019 19:01

Другие вопросы по теме