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

Question

I am trying to implement a jQuery 'slide toggle'. At the top of the page (in the header) I have included:

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

Then the code of the area is:

<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>

The toggle.js contains:

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

When I click it I get the error:

Toggle.js:1Uncaught TypeError: Cannot call method 'click' of undefined.

I can't at all figure out what to do. The divs are nested within further divs, and content holders, etc, but I can't see why this would be an issue.

Answer 1

You should wrap your code in a $(function() {}); statement. This will make sure it will execute after the DOM loads .

Currently, your code is being executed before the DOM is fully built, resulting in a reference to a DOM-element that does not yet exist.

Example:

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

Answer 2

Hotlinking is disabled for files on the jQuery site . The file won't load, so jQuery won't be loaded.

Use one of the CDNs instead .

Eg

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

Answer 3

jQuery is probably not loaded at this point. Wrap your call as such:

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

Answer 4

It would seem that '#morebutton' isn't actually selecting anything.

Have you tried put a breakpoint on with Firebug or the IE/Chrome equivalents and run the selector from the Console ?