This HTML:
<div class="editable" contentEditable="true">
<span class="empty">change me</span>
</div>
and this JQuery:
$(".empty").click(function() {
$(this).css("color","#000");
$(this).html(" ");
});
aren't working as I hoped (or at all). I want to make it so when a user clicks on the "change me" text in the span that the font color changes to black and the existing text in the span goes away.
It's not work because there is no height property for the span, and after emptying it's contents it will have a width of 0px and a height of 0px. Replace the span with a <div> and give it a height in your css.
example here: http://jsfiddle.net/JftGd/12/
I assume you have your code in the <head> of you html.
You need to wrap your code in onLoad, so the code will be executed at the proper time.
$(function() {
$(".empty").click(function() {
$(this).css("color","#000");
$(this).html(" ");
});
});
Execute your code after the page is loaded:
$(document).ready(function(ev){
$(".empty").click(function() {
$(this).css("color","#000");
$(this).html(" ");
});
});
