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：1 Uncaught TypeError：无法调用未定义的方法'click'。

我根本无法弄清楚该怎么做。这些div嵌套在更多的div和内容持有者等中，但我不明白为什么这会成为一个问题。

Answer 1

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

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

示例：

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

Answer 2

Hotlinking is disabled for files on the jQuery site。该文件将不会加载，因此不会加载jQuery。

使用one of the CDNs instead。

E.g。

<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等价物并从控制台运行选择器？

无法调用未定义的方法'click'

4 个答案: