javascript - 在我的 Rails 3 应用程序中使用但在它之外工作时的 jQuery 下拉错误？

Question

我是 jquery 的新手，但我正在努力学习。我正在使用一个在 jsfiddle 中工作正常的下拉按钮。但是，当我在我的 Rails 3 应用程序中尝试它时，它不起作用。 (单击链接时没有任何内容掉落)。工作 jsifiddle http://jsfiddle.net/rKaPN/32/

如果我删除 $(".menu").fixedMenu(); 行并将其添加到 html 中，它就可以正常工作。我很困惑为什么除非我删除 $(".menu").fixedMenu(); line

否则它不起作用

不工作

(function ($) {
$.fn.fixedMenu = function () {
    return this.each(function () {
      var menu = $(this);
        $("html").click(function() {
        menu.find('.drop-down').removeClass('drop-down');
      });
      menu.find('ul li > a').bind('click',function (event) {
            event.stopPropagation();
        //check whether the particular link has a dropdown
        if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {
          //hiding drop down menu when it is clicked again
          if ($(this).parent().hasClass('drop-down')) {
            $(this).parent().removeClass('drop-down');
          }
          else {
            //displaying the drop down menu
            $(this).parent().parent().find('.drop-down').removeClass('drop-down');
            $(this).parent().addClass('drop-down');
          }
        }
        else {
          //hiding the drop down menu when some other link is clicked
          $(this).parent().parent().find('.drop-down').removeClass('drop-down');

      }
      })
    });
  }
  $(".menu").fixedMenu();
  })(jQuery);

工作

html

<script>
        $('document').ready(function(){
            $('.menu').fixedMenu();
        });
        </script>

js

(function ($) {
$.fn.fixedMenu = function () {
    return this.each(function () {
      var menu = $(this);
        $("html").click(function() {
        menu.find('.drop-down').removeClass('drop-down');
      });
      menu.find('ul li > a').bind('click',function (event) {
            event.stopPropagation();
        //check whether the particular link has a dropdown
        if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {
          //hiding drop down menu when it is clicked again
          if ($(this).parent().hasClass('drop-down')) {
            $(this).parent().removeClass('drop-down');
          }
          else {
            //displaying the drop down menu
            $(this).parent().parent().find('.drop-down').removeClass('drop-down');
            $(this).parent().addClass('drop-down');
          }
        }
        else {
          //hiding the drop down menu when some other link is clicked
          $(this).parent().parent().find('.drop-down').removeClass('drop-down');

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

Answer 1

行:

$(".menu").fixedMenu();

在页面加载完成并且 DOM 完全就位之前无法执行。

因此，当您用 $(document).ready() 包围它时它会起作用，而当您在启动 JS 中直接执行它时它不起作用。当它在 DOM 准备好之前执行时，DOM 对象 $(".menu") 找不到，所以它什么都不做。

它在 jsFiddle 中工作，因为您的所有代码都包装在一个 onload 处理程序中(根据 jsFiddle 左上角的设置)。