javascript - Cannot call method 'click' of undefined - Stack Overflow

admin管理员组

文章数量:1296921

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

<script src=".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 plete.
});
});

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.

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./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 plete.
});
});

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.

• javascript
• jquery

Share Follow edited May 9, 2011 at 10:48 Lightness Races in Orbit 385k7777 gold badges666666 silver badges1.1k1.1k bronze badges asked May 9, 2011 at 10:46 Andy JonesAndy Jones 8691111 silver badges1414 bronze badges 1

• Are you running the script in the head element? Then you need to wrap it in a ready() event – Pekka Commented May 9, 2011 at 10:50

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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 plete.
        });
    });
});

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.

E.g.

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

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

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

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 ?

本文标签： javascriptCannot call method 39click39 of undefinedStack Overflow