Question

I have a list of about 3 items. I would like to create a jquery function that will trigger whenever one of those list items is clicked. The function should then be able to do something using the value or attribute of the html list item. So that in the following code when I click on button 2 I get an alert box with the value 2 displayed.

<ul>
 <li class="myclick" id="1">Test Me</li>
 <li class="myclick" id="2">Test Me 2</li>
 <li class="myclick" id="3">Test Me 3</li>

 $.fn.myFunction = (function() {
          alert(this.id);
          });         
 $(function () {
       $(".myclick").click(function(){
                $().myfunction("Test");
      });

I know it’s a pretty basic question but I’m very much new at Jquery and am trying teach myself.

TIA

Answer 1

jsBin demo

// PLUGIN method
$.fn.myFunction = (function() {
   this.click(function(){
          alert(this.id);
   });
});   

$(function(){  // DOM READY
  
    $(".myclick").myFunction(); // BIND PLUGIN TO .myclick elements

});

P.S, if one day you got scared seeing the use of prototype somewhere, … try it right now, instead of fn use prototype 😀

Than you can use also named functions:

function alertID() {
   alert(this.id);
}   

$(function(){
  
    $(".myclick").click( alertID );

});