--- a/s4-main.js	Sat Nov 26 09:55:45 2022 +0859
+++ b/s4-main.js	Sun Dec 04 09:56:36 2022 +0859
@@ -15,7 +15,8 @@
 	//alert("mypath="+mypath);
     }
     function escapeChars(old) {
-	return old.replaceAll('"', '"')
+	return old.replaceAll('&', '&')
+	    .replaceAll('"', '"')
 	    .replaceAll("<", '&lt;')
 	    .replaceAll(">", '&gt;');
     }
@@ -1147,26 +1148,31 @@
 	}
 	unit = unit||document;
 	for (let td of unit.querySelectorAll("td.repl")) {
-	    let text = td.innerHTML;
-	    if (text.startsWith("\&gt;#")) {
-		let newline = text.indexOf("\n");
-		let first, rest;
+	    let firstC = td.firstChild;
+	    // Direct replacing innerHTML breaks embedded DOM event handlers.
+	    // So, we split td.repl into elements and replace the first
+	    // textNode(nodeType==3) with hover-text embeded content.
+	    if (firstC.nodeType==3 && firstC.nodeValue.startsWith(">#")) {
+		let newline = firstC.nodeValue.indexOf("\n");
+		let firstline;
 		if (newline > 0) {
-		    first = text.substring(0, newline);
-		    rest  = text.substring(newline);
+		    firstline = firstC.nodeValue.substring(0, 1+newline);
+		    firstC.nodeValue = firstC.nodeValue.substring(1+newline);
 		} else {
-		    first = text;
-		    rest  = "";
+		    // Cannot be reached here, but leave this for robustness
+		    firstline = firstC.nodeValue;
+		    firstC.nodeValue = "";
 		}
-		td.innerHTML = first.replace(
-		    /#([0-9]+)/g,
-		    (match, start, whole) => {
-			let id = RegExp.$1
-			return '<a title="' + getTextById(id)
-			    + '" href="' + match
-			    + '">' + match + '</a>';
-		    }
-		) + rest;
+		td.insertAdjacentHTML(
+		    'afterbegin',
+		    escapeChars(firstline).replace(
+			/#([0-9]+)/g,
+			(match, start, whole) => {
+			    let id = RegExp.$1
+			    return '<a title="' + getTextById(id)
+				+ '" href="' + match
+				+ '">' + match + '</a>';
+			}));
 	    }
 	}
     }