javascript mouse events

Question

Is there a way in javascript to make it so that an "onclick" works for all members of a particular class? So if I have objects A and B that are both of type X, clicking on either of them will call the same function? But that function should only work on whichever of A or B was called, not both at the same time.

Because basically what I'm trying to do is when I click on either A or B they move to a different location, but I want this to be able to work for any arbitrary number of n elements in the same class

Answer 1

DEMO : http://jsfiddle.net/2BRS9/

Add the same class for all those html elements . You can get the element from which the event was fi

If the classname is "myclass"

  $(".myclass").live({
      click: function(e){
      // You can get id by many ways, some shown here :
      id= this.id;
      console.log(id);
      id = $(this).attr("id");
      console.log(id);
      id = e.target.id;  
      console.log(id);

   }

});​

Answer 2

   <input type="button" class="abc" value="A" />
   <input type="button" class="abc" value="B" />
   <input type="button" class="abc" value="C" />
   <input type="button" class="abc" value="D" />


 $(".abc").click(function() {
  alert("any of the above is clicked");
 });

Answer 3

Try this:

$('.classname_of_member').bind('click',function(){
//your code here
});

Answer 4

For this you can make use of "this" keyword.

for eg

<input type="button" class="abc" value="A" />
<input type="button" class="abc" value="B" />
<input type="button" class="abc" value="C" />
<input type="button" class="abc" value="D" />


$(".abc").click(function() {
 $(this).hide(); // for hiding the only the clicked element.
});

Answer 5

I have written some simple code to handle mouse operations including click, double click, right click and drag and drop. [www.derbyshiresoftware.co.uk/how-to-handle-mouse-operations/][1]