Jquery plugin $.fn.myplugin not working

Question

I might be making a very simple mistake but am having some serious trouble tring to figure out why it's not working.

Here's the code: http://jsfiddle.net/HthCa/

UPDATE: this is my actual code..

<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript">
    $(function() {
        $('#test').customTabs();
    })
</script>

scripts.js

$.fn.customTabs = function() {
    alert($(this).html());
}

Answer 1

In your code:

$('#test').customTabs();

$.fn.customTabs = function() {
    alert($(this).html());
};

You're calling $.fn.customTabs() before defining it. Try instead:

$.fn.customTabs = function() {
    alert(this.html());
};

$('#test').customTabs();

Note that you do not need to apply $ to this in a plugin method, as this is already a jQuery object (the one on which the method was called).

Answer 2

Put the new function definition above where you call it.

$.fn.customTabs = function() {
    alert($(this).html());
};
$('#test').customTabs();