How do you handle click events inside a jQuery plugin?

Question

How do you handle click events inside a plugin? A simplified description is that I want to have a plugin that will detect a click and then update another element.

Example Usage:

$("#some_id").myPlugin("another_id");

Example Plugin:

(function($){

     $.fn.myPlugin=function(update_id){

     .click({$(update_id).html("content_upated");});

     }

})(jQuery);

I don't understand how to code the .click event inside the plugin. Any examples would be helpful. Thanks.

Answer 1

You should do two things:

1. Use this to reference the elements to which your plugin is being applied
2. Namespace your events, so they can easily be unbound later

Try the following

(function($){

     $.fn.myPlugin = function(update_id) {

       this.bind("click.myPlugin", function () {
         $(update_id).html("content_upated");
       });

    };

})(jQuery);

You should read the page on jQuery plugin authoring for more information on how to correctly develop jQuery plugins. You're missing other important details like accepting an arguments object.

Answer 2

Use this to access the object that the plugin is being invoked on:

(function($){
     $.fn.myPlugin=function(update_id){
         this.click( function() { $(update_id).html("content_upated"); } );
     }
})(jQuery);

Note that your usage would need to include the id selector in this example, or you would need to include it in your click function:

$("#some_id").myPlugin("#another_id");