Question

In HTML, I have a button list. If user clicks a button,
doCommand function will be called.
The code is following,

<ul>
<li class="button1" onclick="doCommand('bold');" id="bold-button" title="bold">B</li>
<li class="button2" onclick="doCommand('bold');" id="italic-button" title="bold">I</li>
<li class="button3" onclick="doCommand('bold');" id="underline-button" title="bold">U</li>
<li class="button4" onclick="doCommand('bold');" id="strikethrough-button" title="bold">S</li>
</ul>

This is plain expression, normal web programmer will code like that.
But, I want to hide onclick event and its function for security reason.
So the HTML code will be like this,

<ul>
<li class="button1" id="bold-button" title="bold">B</li>
<li class="button2" id="italic-button" title="bold">I</li>
<li class="button3" id="underline-button" title="bold">U</li>
<li class="button4" id="strikethrough-button" title="bold">S</li>
</ul>

Is there any efficient way to do this?
Hiding onclick property but do the same work.
I am using jQuery.

Answer 1

if you set the same class for the btns, you could easily do:

markup:

<ul>
<li class="button1 clickable" id="bold-button" title="bold">B</li>
<li class="button2 clickable" id="italic-button" title="bold">I</li>
<li class="button3 clickable" id="underline-button" title="bold">U</li>
<li class="button4 clickable" id="strikethrough-button" title="bold">S</li>
</ul>

js:

$('.clickable').click(function(){/* doCommand('bold') or whatever */})

Edit: if you want on click to directly transform the text to bold, you could use the this (that refers to the element you clicked, and you need to wrap it inside jQuery $) keyword inside the function i.e.

$('.clickable').click(function(){$(this).css('font-weight','bold')})