... sigh...
it was one superfluous closing div tag that was making IE freak out...
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style type="text/css">
.editable {
background-color: #FF9;
cursor: pointer;
}
</style>
</head>
<body>
<div class="editInPlace"><span num="tit1">the title</span> <span num="num1">the number</span></div>
<div class="editInPlace"><span num="tit2">the second title</span> <span num="num2">the second number</span> <span num="num3">the second piece of info</span></div>
<script>
$(document).ready(function()
{
setClickable();
});
function setClickable() {
$(".editInPlace").click(function(){
var textarea = "<div>"
$(this).children('span').each(function () {
textarea+="<input name='" + $(this).attr("num") + "' value='" + $(this).text()+ "'/>";
});
textarea+="</div>"
var button = "<div><input type='button' value='save' class='saveButton' /> OR <input type='button' value='cancel' class='cancelButton' /></div>";
var revert = $(this).html();
$(this).replaceWith(textarea + button);
$(".saveButton").click(function(){
saveChanges(this, false);
});
$(".cancelButton").click(function(){
saveChanges(this, revert);
});
}).mouseover(function() {
$(this).addClass("editable");
}).mouseout(function() {
$(this).removeClass("editable");
});
}
function saveChanges(obj, cancel) {
if(!cancel) {
var t={};
var s=""
$(obj).parent().prev().find("input").each(function(ind) {
t[ind]={vl:$(this).val(),
nm:$(this).attr('name')
}
});
/*$.post("test2.php", {content: t}, function(txt) {
alert(txt);
}); */
$(obj).parent().prev().html("");
$.each(t, function(index) {
s+="<span num="+t[index].nm+">"+t[index].vl+"</span> ";
});
$(obj).parent().prev().append(s)
} else {
$(obj).parent().prev().html(cancel);
}
$(obj).parent().prev().attr("class","editInPlace");
$(obj).parent().remove()
setClickable();
}
</script>
</body>
</html>