Question

我使用ajax从外部文件加载内容（称为menu.html）。现在我有我的菜单，当我点击带有href的标签到另一个页面时，我加载了AJAX调用，其中我有我之前的内容（菜单页面加载了ajax）。

这个项目的git存储库是：https://github.com/szymonhernik/ArtHer_ajax

//----------- AJAX calls on menu clicks --------------//

(function($) {
  "use strict";

  var $content,
      $section;

  function loadMenuLink(url) {
        $.ajax(url,{ dataType: "text" })
        .then(function(contents){
            $content.html(contents);
        });
  }

  function stopScroll() {
    $section.on('mousewheel', function() {
      //do nothing-> dont load menu.html
    });
  }

  function pageClicked(evt) {

      evt.stopImmediatePropagation();
      evt.stopPropagation();
      evt.preventDefault();

      var url = $(this).attr("href");
      loadMenuLink(url);
      stopScroll();
  }


  function bindings () {
    $(document).on("click", "#menu a", pageClicked);
  }

  $(document).ready(function () {
     $content = $('.content');
     $section = $('section');

     bindings();
  });

})(jQuery);

我有这个小模块 - 首先使用pageClicked函数从标签的href中获取url，然后在我传递此url时使用loadMenuLink函数。

这是我的这个页面的html代码（菜单页面）：

<div id="menu" class="menu animated fadeIn" rel="js-menu">
  <div class="menu-bar animated fadeInUp">

    <a href="about.html" rel="js-about"><p>O nas</p></a><span>/</span>
    <a href="projects.html" rel="js-projects"><p>Projekty</p></a><span>/</span>
    <a href="clients.html" rel="js-clients"><p>Nasi klienci</p></a><span>/</span>
    <a href="contact.html" rel="js-contact"><p>Kontakt</p></a>

 </div>
</div>

问题是，在我加载menu.html后，当滚动时，我无法阻止默认的'mousewheel'事件 - ＆gt;加载menu.html后，我想在滚动上不做任何事。

我将上传我的第一个ajax函数，也许你可以在那里找到问题。

(function($) {
 "use strict";

 var $section,
     $elements,
     $content,
     $arrow,
     $label;

 function goToMenu (e) {
   e.stopPropagation();
   e.stopImmediatePropagation();
   e.preventDefault();

   if(e.deltaY /120 > 0) {
     $('.menu').fadeOut(500, function () { $(this).remove();});
     $elements.removeClass("animated fadeOut not-active");
     $elements.addClass("animated fadeIn");
   }
   else if (e.deltaY /120 < 0) {
     $.ajax('menu.html',{ dataType: "text" })
       .then(function(contents){
          $content.html(contents);
          $elements.addClass("animated fadeOut not-active");
     });
    }
   }

   function arrowToMenu (e) {
     e.stopPropagation();
     e.stopImmediatePropagation();
     e.preventDefault();
     $.ajax('menu.html',{ dataType: "text" })
       .then(function(contents){
         $content.html(contents);
         $elements.addClass("animated fadeOut not-active");
       });
     }


 function bindings () {
   $section.on('mousewheel', goToMenu);
   $arrow.on('click', arrowToMenu);
 }

 $(document).ready(function () {
    $elements = $('.elements');
    $section = $('section');
    $content = $('.content');
    $label = $('.label');
    $arrow = $('.arrow');

    bindings();
 });
})(jQuery);

这个项目的git存储库是：https://github.com/szymonhernik/ArtHer_ajax

希望有人能帮助我。

使用AJAX加载页面后，无法阻止“鼠标滚轮”事件的默认设置

0 个答案: