CODEWITHSUNDEEP
javascripthtml
Spencer Cooley
Spencer Cooley

Reputation: 8881

Why won't click events work on a span but the will work on an a?

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');

}

Upvotes: 6

Views: 8678

Answers (10)

Trumpetmaster
Trumpetmaster

Reputation: 11

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.

Upvotes: 1

Alex Rashkov
Alex Rashkov

Reputation: 10015

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.

Upvotes: 0

natlee75
natlee75

Reputation: 5197

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.

Upvotes: 1

drGrove
drGrove

Reputation: 176

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
   });
});

Upvotes: 3

zatatatata
zatatatata

Reputation: 4821

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(); 
});

Upvotes: 0

A. Rehman Javed
A. Rehman Javed

Reputation: 309

First of all, use the Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

and then, for the CSS of a span, use:

span{
    display: block;
    display: inline-block;
}

Upvotes: -1

mtf
mtf

Reputation: 101

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 complex method is required on the event handler. See, W3C: http://www.w3.org/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;
}

Upvotes: 0

Spencer Cooley
Spencer Cooley

Reputation: 8881

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.

Upvotes: 0

Mauvis Ledford
Mauvis Ledford

Reputation: 42374

Try setting the spans to display: inline-block.

Upvotes: 0

Reinier Kaper
Reinier Kaper

Reputation: 42

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.

Upvotes: 0

Related Questions