无法调用未定义的方法“单击”

Question

我正在尝试实现jQuery的“幻灯片切换”。 在页面顶部（标题中），我包括：

<script src="http://code.jquery.com/jquery-latest.js"></script>

那么该区域的代码是：

<a href="#" id="morebutton" class="more">More</a>
<div class="toggler">
<div id="morepanel" class="ui-widget-content ui-corner-all">
  <p>Text</p>
    </div>
</div>

<script src="js/toggle.js" type="text/javascript"></script>

toggle.js包含：

$('#morebutton').click(function () {
$('#morepanel').slideToggle('slow', function () {
    // Animation complete.
});
});

当我单击它时，出现错误：

Toggle.js：1Uncaught TypeError：无法调用未定义的方法“ click”。

我完全不知道该怎么办。 div嵌套在其他div和内容所有者等中，但是我看不到为什么这会成为问题。

Answer 1

您应该将代码包装在$(function() {}); 声明。 这将确保它将在DOM加载后执行。

当前，您的代码是在完全构建DOM之前执行的，从而导致对尚不存在的DOM元素的引用。

例：

$(function() {
    $('#morebutton').click(function () {
        $('#morepanel').slideToggle('slow', function () {
            // Animation complete.
        });
    });
});

Answer 2

jQuery网站上的文件禁用热链接 。 该文件不会加载，因此不会加载jQuery。

改用CDN之一 。

例如

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

Answer 3

可能此时未加载jQuery。 这样包装您的电话：

$(document).ready(function() {
  $('#morebutton').click(function () {
    $('#morepanel').slideToggle('slow', function () {
        // Animation complete.
    });
  });
})

Answer 4

似乎“ #morebutton”实际上没有选择任何内容。

您是否尝试过在Firebug或IE / Chrome等效项上设置断点并从控制台运行选择器？