Question

Am a newbie who’s trying out jQuery Plugin development.
I am trying to change background color from an a external js file(a small plugin)
Console says “Uncaught TypeError: Object # has no method ‘css’ ”
Please pardon me if I’m completely out of track.

HTML

<button id="clicker">change</button>
<div id='ra'>Box</div>​

CSS

#ra {
    height:100px;
    width:100px;
    background-color: #DDD;
}​

JS

var $ra = $('#ra');
$('#clicker').on('click',function(){
    $ra.change()
});    ​

This is my plugin.

function( $, window, document, undefined ) { 
    $.fn.change = function( options ) {
        return this.each (function() { 
            this.css('background-color','rgba(52,36,42,0.2)');
        });
    };
})( jQuery, window, document );

Answer 1

Inside the each loop, this refers to the native DOM node, not a jQuery object. You need to pass it into jQuery:

return this.each (function() { 
    $(this).css('background-color','rgba(52,36,42,0.2)');
});

Also note that in your question, the plugin code is missing the opening parenthesis. I’m guessing that’s just a mistake copying and pasting code into your question.

Here’s a working example.