Menu
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.com/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.com/u/25006518/bold.png');
}
#italic{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/italic.png');
}
#underline{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/underline.png');
}
#justifyCenter{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/underline.png');
}
#justifyRight{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/underline.png');
}
#justifyRight{
display:block;
width:30px;
height:30px;
background-image:url('http://dl.dropbox.com/u/25006518/underline.png');
}
965
span element has onclick event to handle mouse clicks.
If you just need to trigger a click event, you can omit the line that begins with for( . @Parag: Read it again. The loop is to click the same link 50 times, which is what it does.
An element receives a click event when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
If you want native JS to trigger click event without clicking then use the element id and click() method of JavaScript.
if 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
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
