Question

How is it possible to create a plugin using this code as an example:

html:

 <div id="instance1">
   <a href="#">Click</a>
   <b>Change me</b>
 </div>

js:

$("#instance1 a").click(function(){
   $("#instance1 b").text('Changed');
   return false;
});

http://jsfiddle.net/GSjWw/

I would want the initialization to be something like this:

 $("#instance1").newPlugin();

Which binds the instance1 id to the click function, how would i update the Javascript code above.. Currently it selects first #instance1, but how does this change based on binding a new plugin?

Answer 1

Something like this:

(function($){
    $.fn.newPlugin = function() {
        var $this = this;
        return $this.each(function(){
            $this.find('a').click(function() {
                $this.find('b').text('Changed');
                return false;                                
            });
        });              
    }
})(jQuery);