jQuery extended function not initialized

Question

Working in Firebug Console, but not from file.

Google Chrome - Uncaught TypeError: Object # has no method 'listAttributes'

Firefox - $(".div4").listAttributes is not a function

<script src='/jquery.js'></script>
<script src='jquery.listAttributes.js'></script>

<div class='div4' style='color:red;'>
</div>

<script>
$(".div4").listAttributes();
 </script>

jquery.listAttributes.js:

if(jQuery) {
    jQuery(document).ready(function() {
        jQuery.fn.listAttributes = function(prefix) {
            var list = [];
            $(this).each(function() {
                console.info(this);
                var attributes = [];
                for(var key in this.attributes) {
                    if(!isNaN(key)) {
                        if(!prefix || this.attributes[key].name.substr(0,prefix.length) == prefix) {
                            attributes.push(this.attributes[key].name);
                        }
                    }
                }
                list.push(attributes);
            });
            return (list.length > 1 ? list : list[0]);
        }
    });
}

Where is my mistake?

Nick Craver · Accepted Answer · 2010-06-19 11:44:35Z

4

This code:

$(".div4").listAttributes();

Is running before document.ready, but your plugin isn't defined until document.ready, just remove the jQuery(document).ready(function() { }); wrapper from your plugin :)

Another note, the call to the plugin should be in a document.ready handler, like this:

$(function() {
  $(".div4").listAttributes();
});

This ensures that the .div4 elements are in the DOM and ready to go.

answered Jun 19, 2010 at 11:44

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quentin · Accepted Answer · 2010-06-19 11:44:05Z

1

You are calling $(".div4").listAttributes(); inline in the script (so it is called when the browser parses that <script> element) but you are assigning jQuery.fn.listAttributes inside a ready event so it doesn't exist until after the browser has finished parsing the entire document.

answered Jun 19, 2010 at 11:44

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

jQuery extended function not initialized

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related