类型错误: $(..).查找(..).on 不是一个函数

TypeError: $(...).find(...).on is not a function

本文关键字:函数 一个 查找 错误 类型 on      更新时间:2023-09-26

我必须管理一个很小的网络演示,只有一些javascript。它是几年前写的,现在我尝试实现移动兼容菜单。

以下是在我开始使用新菜单之前安装的jQuery版本:jQuery.min.js : jQuery JavaScript Library v1.6.1jQuery.tools.overlay.min.js : jQuery Tools v1.2.7 - Web 缺少的 UI 库jQuery-ui.min.js : jQuery UI 1.8.13

现在我尝试几个较新的jQuery代码,目前我使用此版本:

<script src="scripts/jquery-1-12-3.min.js" type="text/javascript"></script> 
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

我想用于菜单的插件是"doubletaptogo.js":

(function($) {
  /*
    Responsive Flat Menu
    http://cssmenumaker.com/menu/responsive-flat-menu
  */
  $.fn.menumaker = function(options) {
    var cssmenu = $(this),
      settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);
    return this.each(function() {
      cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
      $(this).find("#menu-button").on('click', function() {
        $(this).toggleClass('menu-opened');
        var mainmenu = $(this).next('ul');
        if (mainmenu.hasClass('open')) {
          mainmenu.hide().removeClass('open');
        } else {
          mainmenu.show().addClass('open');
          if (settings.format === "dropdown") {
            mainmenu.find('ul').show();
          }
        }
      });
      cssmenu.find('li ul').parent().addClass('has-sub');
      multiTg = function() {
        cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
        cssmenu.find('.submenu-button').on('click', function() {
          $(this).toggleClass('submenu-opened');
          if ($(this).siblings('ul').hasClass('open')) {
            $(this).siblings('ul').removeClass('open').hide();
          } else {
            $(this).siblings('ul').addClass('open').show();
          }
        });
      };
      if (settings.format === 'multitoggle') multiTg();
      else cssmenu.addClass('dropdown');
      if (settings.sticky === true) cssmenu.css('position', 'fixed');
      resizeFix = function() {
        if ($(window).width() > 768) {
          cssmenu.find('ul').show();
        }
        if ($(window).width() <= 768) {
          cssmenu.find('ul').hide().removeClass('open');
        }
      };
      resizeFix();
      return $(window).on('resize', resizeFix);
    });
  };
})(jQuery);
/*
    By Osvaldas Valutis, www.osvaldas.info
    Available for use under the MIT License
*/
;
(function($, window, document, undefined) {
  $.fn.doubleTapToGo = function(params) {
    if (!('ontouchstart' in window) &&
      !navigator.msMaxTouchPoints &&
      !navigator.userAgent.toLowerCase().match(/windows phone os 7/i)) return false;
    this.each(function() {
      var curItem = false;
      $(this).on('click', function(e) {
        var item = $(this);
        if (item[0] != curItem[0]) {
          e.preventDefault();
          curItem = item;
        }
      });
      $(document).on('click touchstart MSPointerDown', function(e) {
        var resetItem = true,
          parents = $(e.target).parents();
        for (var i = 0; i < parents.length; i++)
          if (parents[i] == curItem[0])
            resetItem = false;
        if (resetItem)
          curItem = false;
      });
    });
    return this;
  };
})(jQuery, window, document);
/**
 * doubleTapToGoDecorator
 * Adds the ability to remove the need for a second tap
 * when in the mobile view
 *
 * @param {function} f - doubleTapToGo
 */
function doubleTapToGoDecorator(f) {
  return function() {
    this.each(function() {
      $(this).on('click', function(e) {
        // If mobile menu view
        if ($('#menu-button').css('display') == 'block') {
          // If this is not a submenu button
          if (!$(e.target).hasClass('submenu-button')) {
            // Remove the need for a second tap
            window.location.href = $(e.target).attr('href');
          }
        }
      });
    });
    return f.apply(this);
  }
}
// Add decorator to the doubleTapToGo plugin
jQuery.fn.doubleTapToGo = doubleTapToGoDecorator(jQuery.fn.doubleTapToGo);
/**
 * jQuery
 */
(function($) {
  $(document).ready(function() {
    $("#cssmenu").menumaker({
      title: "Menu",
      format: "multitoggle"
    });
    $('#cssmenu li:has(ul)').doubleTapToGo();
  });
})(jQuery);

菜单如下所示:

<nav id='cssmenu' role='navigation'>   
    <a href="#cssmenu" title="Show navigation">Show navigation</a>
    <a href="#" title="Hide navigation">Hide navigation</a>
  <ul>...

。当我使用 Firebug 调试时,我总是看到这篇文章主题中提到的错误!

jQuery的版本还有问题吗?我很抱歉,但我不太习惯用javascript编程。

非常感谢您的帮助!

我现在添加

<script type="text/javascript" src="scripts/jquery-ui.min.js" ></script> //  v1.11.4 

我将带有该代码的doubletaptogo绑定到我的html正文中:

<script type="text/javascript">
  $(function () {
    $('.cssmenu').doubleTapToGo();
  });
</script>  

到目前为止,不幸的是它不起作用。有了这个doubletaptogo.min.js我的笔记本电脑上有一个很好的菜单,Firebug没有错误,但我的移动设备上没有菜单:

;(function(e,t,n,r){e.fn.doubleTapToGo=function(r){if(!("ontouchstart"in t)&&!navigator.msMaxTouchPoints&&!navigator.userAgent.toLowerCase().match(/windows phone os 7/i))return false;this.each(function(){var t=false;e(this).on("click",function(n){var r=e(this);if(r[0]!=t[0]){n.preventDefault();t=r}});e(n).on("click touchstart MSPointerDown",function(n){var r=true,i=e(n.target).parents();for(var s=0;s<i.length;s++)if(i[s]==t[0])r=false;if(r)t=false})});return this}})(jQuery,window,document);

使用doubletaptogo.js Firebug中存在错误(如主题中所述),但是我的笔记本电脑上有一个很好的菜单,而我的移动设备上有一个"菜单",它对任何事情都没有反应。我还尝试针对过滤器()更改find(),但过滤器()"不是函数"。

还有什么问题?我还尝试仅使用该站点的代码作为菜单,只是为了在我的站点上显示它:http://codepen.io/dmitrykiselyov/pen/XJwqZM...这也行不通。我的移动设备上只有"菜单"没有反应。那么,可能是jQuery的问题?我现在使用 jquery-1-12-3.min.js UI 是版本 v1.11.4。可能是一个糟糕的组合?

我遇到了同样的错误,解决方案是请使用 1.x.y 系列中最新的 jQuery 版本(您可以在这里选择:https://code.jquery.com/jquery/1.12.4 对我来说效果很好)。