Diff�rence entre onclick et click?

Bonsoir � tous!

Je suis en train de cr�er un �diteur wysiwyg, et mon code fonctionne mal. Pour une raison qui m'est inconnue, lorsque j'appelle ma fonction insertTag() depuis un onclick dans le HTML, tout va bien. A l'inverse, quand l'appel passe via la m�thode .click(), rien ne va.
Auriez vous des id�es?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<title>WYSIWYG</title>
</script>
</head>
<body>
<div id="main">
	<div>
		<p>
			<input type="button" value="G" id="gras"></input>
			<input type="button" value="I" onclick="insertTag('&lt;italique&gt;', '&lt;/italique&gt;', 'textarea')" />
		</p>	
	</div>	
	<textarea id="textarea" cols="150" rows="10"></textarea>
	<div id="previewDiv"></div>
</div>
<script src="jQuery.js"></script>
<script src="wysiwyg.js"></script>
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
	$(document).ready(function () {
		$("#gras").on("click", function() {
			insertTag("&lt;gras&gt;, &lt;/gras&gt;, textarea");
		});
	});
	function insertTag(startTag, endTag, textareaId, tagType) {
		var field = document.getElementById(textareaId);
		var scroll = field.scrollTop;
		field.focus();
		var startSelection   = field.value.substring(0, field.selectionStart);
		var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
		var endSelection     = field.value.substring(field.selectionEnd);
		field.value = startSelection + startTag + currentSelection + endTag + endSelection;
		field.focus();
		field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
	}  	
 
	function preview(textareaId) {
		var field = textareaId.value;
		field = field.replace(/&/g, '&amp;');
		field = field.replace(/</g, '&lt;').replace(/>/g, '&gt;');
		field = field.replace(/\n/g, '<br />').replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');	
		field = field.replace(/&lt;gras&gt;([\s\S]*?)&lt;\/gras&gt;/g, '<strong>$1</strong>');
		field = field.replace(/&lt;italique&gt;([\s\S]*?)&lt;\/italique&gt;/g, '<em>$1</em>');
		document.getElementById("previewDiv").innerHTML = field;
		console.log(field);
	}
 
	var area = document.getElementById("textarea");
	preview(area);

Merci d'avance!