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...

you define the method on $.fn and will be available to all collections. — dandavis
– dandavis, Commented Nov 22, 2014 at 5:22
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? — hashbrown
– hashbrown, Commented Nov 22, 2014 at 5:25
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>") — dandavis
– dandavis, Commented Nov 22, 2014 at 5:27
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.. — hashbrown
– hashbrown, Commented Nov 22, 2014 at 5:31
look like there's no need, answer looks close to what i would have done, even has defaults up top.... — dandavis
– dandavis, Commented Nov 22, 2014 at 5:33

Umesh Sehta · Accepted Answer · 2014-11-22 05:30:53Z

2

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

answered Nov 22, 2014 at 5:30

Umesh Sehta

10.7k5 gold badges43 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hashbrown Over a year ago

Looks like exactly what I need... please bear with me while I test it out.. Thanks!

hashbrown Over a year ago

It works brilliantly. I am assuming the $(function(){ }); is a shortcut for jQuery's $(document).ready() right?

Umesh Sehta Over a year ago

@hashbrown yes you can use $(document).ready() instread if you want

Elise Chant · Accepted Answer · 2014-11-22 05:48:15Z

1

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>');
      }
    });
 });
};

answered Nov 22, 2014 at 5:48

Elise Chant

5,2153 gold badges31 silver badges37 bronze badges

1 Comment

hashbrown Over a year ago

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.

Collectives™ on Stack Overflow

Associate JavaScript Object Function to HTML element

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related