Associate JavaScript Object Function to HTML element

Question

Let's say - On any <UL> element in page, I want to define a few behaviours. Such as...

• If you click on any <li> inside the <ul>, then its colour changes...
• If you double-click an <li>, then a new <li> gets appended at the end..
• and many other such behaviours ...

Now I know little jQuery using which I can write individual functions to accomplish these things....

• $("ul li").on ('click', function () { ... .css() .. });
• $("ul li").on ('dblclick', function () { ... .append("<li>New Born Li</li>") ... });

But what I really want to do is to encapsulate all these functions in a single object (class) like structure. Then I will just associate that function on any element to enable those functionalities on that element. Something like this -

$("ul").enableMySpecialULFeatures ({ 
 color: 'red',
 textToAppend: 'New Born Li' ,
 ... 
});

Once I call this function on <ul> then all the behaviours get applied on <ul>.

My Question is - how do I create this enableMySpecialULFeatures type of object function? Wondering if anyone can give me a boilerplate to get me started...

• dandavis: you define the method on $.fn and will be available to all collections.
• hashbrown: Ok, thanks. I am reading about $.fn now.. But how do I put the other behavioural functions (such as color changing and appending etc.) inside my new function?
• dandavis: you basically template out the hard-coded operations you have now to work on this and the passed argument object instead of primitives. ex: ...append("<li>"+spec.textToAppend+"</li>")
• hashbrown: would it be possible for you to show a simple example as Answer? I am less than 24-hrs old with JavaScript... A simple working example will get me started..
• dandavis: look like there's no need, answer looks close to what i would have done, even has defaults up top....

Answer 1

create js plugin like this:-

$.fn.enableMySpecialULFeatures = function(options) {
 var settings = $.extend({
 color: "#556b2f",
 textToAppend: 'New Born Li'
 }, options );
 return this.each(function() {
 $(this).find('li').click(function(){
 $(this).css('color',settings.color);
 });
 $(this).find('li').dblclick(function(e){
 e.preventDefault();
 $(this).append('<li>'+settings.textToAppend+'</li>');
 });
 });
};

and use:-

$(function(){
 $('ul').enableMySpecialULFeatures({
 color:'green',
 textToAppend:"hello"
 });
});

Demo

• hashbrown: Looks like exactly what I need... please bear with me while I test it out.. Thanks!
• hashbrown: It works brilliantly. I am assuming the $(function(){ }); is a shortcut for jQuery's $(document).ready() right?
• Umesh Sehta: @hashbrown yes you can use $(document).ready() instread if you want

Answer 2

And then improve @mohit-arora's example by using multiple event handlers on a single reference to $(this) in the return statement:

$.fn.enableMySpecialULFeatures = function(options) {
 var settings = $.extend({
 color: "#556b2f",
 textToAppend: 'New Born Li'
 }, options );
 return this.each(function() {
 $(this).find('li').on({
 click: function(){
 $(this).css('color',settings.color);
 },
 dblclick: function(e) {
 e.preventDefault();
 $(this).append('<li>'+settings.textToAppend+'</li>');
 }
 });
 });
};

• hashbrown: Thanks Elise... I have accepted Mohit's reply as Answer but I do consider your suggestion on using multiple event handlers on single reference to this.