Can anyone think of a reason why a click event would work on an a tag, but not on a span? I am making a rich text editor and have a bold button that when clicked is supposed to make the text bold. It only works when I use an anchor element. I tried using a span and nothing happens. The html is the only thing that I am changing so I don't think it is a JavaScript problem.
$(document).ready(function(){
//creates the toolbar~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$('#rte').focus()
var tools = [];
tools.push('underline');
tools.push('italic');
tools.push('bold');
tools.push('justifyCenter');
tools.push('justifyLeft');
tools.push('justifyRight');
var simple_toolbar = function(){
//iterates through each tool and adds its functionality to the editor
$.each(tools, function(index,value){
$('#'+value).click(function(event){
document.execCommand( value, false, null);
$('#rte').focus();
return false;
});
//end of click function
});
//end of each iterator
};
//end of simple toolbar function
//invokes the simple toolbar.
simple_toolbar();
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
});
//end of the DOM loader
<!doctype html>
<html>
<head>
<title>An HTML5 page</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src=".6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="controls">
<!-- The only button working here is the bold because it is an <a> -->
<a href="#" id="bold"></a>
<span id="italic"></span>
<span id="underline"></span>
<span id="justifyLeft"></span>
<span id="justifyCenter"></span>
<span id="justifyRight"></span>
</div><!--end of controlls div-->
<div contenteditable="true" id="rte"></div>
<textarea id="my_form" rows="8" cols="58" ></textarea>
</div><!--end of the wrapper div-->
</body>
</html>
#bold{
display:block;
width:30px;
height:30px;
background-image:url('.png');
}
#italic{
display:block;
width:30px;
height:30px;
background-image:url('.png');
}
#underline{
display:block;
width:30px;
height:30px;
background-image:url('.png');
}
#justifyCenter{
display:block;
width:30px;
height:30px;
background-image:url('.png');
}
#justifyRight{
display:block;
width:30px;
height:30px;
background-image:url('.png');
}
#justifyRight{
display:block;
width:30px;
height:30px;
background-image:url('.png');
}
Can anyone think of a reason why a click event would work on an a tag, but not on a span? I am making a rich text editor and have a bold button that when clicked is supposed to make the text bold. It only works when I use an anchor element. I tried using a span and nothing happens. The html is the only thing that I am changing so I don't think it is a JavaScript problem.
$(document).ready(function(){
//creates the toolbar~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$('#rte').focus()
var tools = [];
tools.push('underline');
tools.push('italic');
tools.push('bold');
tools.push('justifyCenter');
tools.push('justifyLeft');
tools.push('justifyRight');
var simple_toolbar = function(){
//iterates through each tool and adds its functionality to the editor
$.each(tools, function(index,value){
$('#'+value).click(function(event){
document.execCommand( value, false, null);
$('#rte').focus();
return false;
});
//end of click function
});
//end of each iterator
};
//end of simple toolbar function
//invokes the simple toolbar.
simple_toolbar();
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
});
//end of the DOM loader
<!doctype html>
<html>
<head>
<title>An HTML5 page</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="controls">
<!-- The only button working here is the bold because it is an <a> -->
<a href="#" id="bold"></a>
<span id="italic"></span>
<span id="underline"></span>
<span id="justifyLeft"></span>
<span id="justifyCenter"></span>
<span id="justifyRight"></span>
</div><!--end of controlls div-->
<div contenteditable="true" id="rte"></div>
<textarea id="my_form" rows="8" cols="58" ></textarea>
</div><!--end of the wrapper div-->
</body>
</html>
#bold{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox./u/25006518/bold.png');
}
#italic{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox./u/25006518/italic.png');
}
#underline{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox./u/25006518/underline.png');
}
#justifyCenter{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox./u/25006518/underline.png');
}
#justifyRight{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox./u/25006518/underline.png');
}
#justifyRight{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox./u/25006518/underline.png');
}
- Can you show your code? Have you tried floating or setting display: block on the span to see if that makes a difference? If the span is empty that might be a solution. – daveyfaherty Commented Oct 21, 2011 at 10:35
- The span element can be bound to all the mon event handlers so it's probably a JavaScript problem. Can you expose some code? – Jonas G. Drange Commented Oct 21, 2011 at 10:35
- dose the span have its width and height set, and dose it have a display like inline-block? – david Commented Oct 21, 2011 at 10:36
- Yes. the span has width, height, and diplay block. – Spencer Cooley Commented Oct 21, 2011 at 10:47
-
3
On Chrome, the anchor tag does not make the selection get lost, whereas the span tag does. I've no idea why though. The justifying does work when you focus before calling
execCommandby the way: jsfiddle/pimvdb/UR5QG. – pimvdb Commented Oct 21, 2011 at 11:06
10 Answers
Reset to default 3if you update your jQuery to v1.7.1 you can use the .on() function. This will then allow you to bind the click method to the span using an id.
$(document).ready(function(){
$("#yourContainer").on("click", "#yourSpanID", function(){
// The code to make everything bold
});
});
Any DOM element can listen for a "click" event, and in fact the code as you presented it is working in that sense. If you precede your call to document.execCommand with an alert statement you'll find that the alert occurs anytime you click on any of the buttons and not just the "bold" button.
You are using your span tags the wrong way; span tags are for coloring and styling one word in a sentence.
The best thing to do is use the <ul> tag; you do have to end it. Like this:
<html>
<body>
<ul>
<li><a href="put a link file here if you want">"put your text here"</a></li>
<li><a href="put a link file here if you want">"put your text here"</a></li>
<li><a href="put a link file here if you want">"put your text here"</a></li>
</ul>
</body>
</html>
Now assuming you have a style sheet you can style the or user list in CSS like this:
html{ }
body{ }
ul{ }
ul li{ float:left; this will define how the tags are displayed }
ul li a{ "from here down define how links act." }
ul li a:visited{ color:put a color here like light blue or something;}
ul li a:hover{ color:same with this; }
ul li a:active{color:same with this; }
Also check your hierarchy it will help you in the long run. Hope I helped.
I think the variable 'value' gets destroyed when the iteration is done. You could make a global function that takes care of the actual click handle and assign this function to the buttons in an iteration.
You could grab the ID of the button clicked in the global function and use that to parse as an argument in the execCommand method.
So it's a scope issue, to be clear.
Try setting the spans to display: inline-block.
This is not the best solution, but the only reason I wanted to use spans is so that the page would not jump to the top when you clicked an anchor tag with an href="#". I decided to just use the anchor tags, but instead of using href="#" I am using href="#bold". apparently when you use an id selector as an href attribute the page will jump to the spot on the page where that element is. Still not sure why it won't work with other elements. I tried just getting rid of the iterator and writing out a separate click event for each button, but it still only worked with an anchor tag.
Still trying to research the 'onclick' event more deeply, but one of two things present: 1) onclick is reserved for 'a' and 'input' tags, only (will set out to verify this); or, 2) a more plex method is required on the event handler. See, W3C: http://www.w3/TR/html5/webappapis.html#event-handler-content-attributes
Side Note: Having settled on 'a', one could reduce the style sheet to just background URL on the 'id', and add a descendent selector on the controls:
#controls a {
display: block;
width: 30px;
height: 30px;
}
When you attach a mousedown event to the span, which you cancel, then span also works. Don't know which (if at all) spec defines different behavior on spans and anchors, but it works now. See the jsFiddle. Changed the following part:
$('#'+value).click(function(event){
document.execCommand( value, false, null);
$('#rte').focus();
return false;
}).mousedown(function(e){
e.preventDefault();
});
Instead of click event you should use either live or on
This will bind the click event to all elements even though they are dynamically created.
First of all, use the Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
and then, for the CSS of a span, use:
span{
display: block;
display: inline-block;
}