無法調用未定義的方法“單擊”

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等效項上設置斷點並從控制台運行選擇器？