Are there any ancient coins based on the Four Elements?

For setting click events on multiple elements on a web page, is there any problem with doing the following?

• What are people's opinions on the following method for handling a large number of clickable elements on a web page? First, here is the HTML for four elements, each with the commonButton class, and unique IDs: <div class="commonButton" id="commonButton1">Up</div> <div class="commonButton" id="commonButton2">Down</div> <div class="commonButton" id="commonButton3">Left</div> <div class="commonButton" id="commonButton4">Right</div> Then some jQuery+JavaScript to bind the same click function to each commonButton element: $(".commonButton").bind("click", function() { switch (this.id) { case "commonButton1": doSomething(); break; case "commonButton2": $("#something").hide(); break; case "commonButton3": goLeft(); break; case "commonButton4": submitForm; break; default: break; } }); When any of the commonButton elements are clicked, the common function is called, with a switch statement deciding what action to take (based on the element ID which is passed with the event). On the one hand, this method is very easy to maintain in the code and adding a new button becomes simplicity itself, and it's a lot less code than adding a new bind to each individual button.  On the other hand, I currently have 61 buttons all with the same bind using the above method! It all works very smoothly and has greatly reduced my code all round, but it just seems too easy.  There has to be a catch, right?

• Answer:

  for a large number of clickable elements you can use delegate. jQuery code: $(function(){ $("body").delegate('div.commonButton', 'click', function(e){ if ($(e.target).is('#commonButton1')) { alert('button1 clicked'); } else if ($(e.target).is('#commonButton2')) { alert('button2 clicked'); } }); }); also you can replace body by parent node