Geek Answers Handbook

Why will not push events for a period, but will work on a?

Can anyone think of a reason why the click event will work with the tag a, but not on span? I am making a rich text editor and have a bold button that, when clicked, should make the text bold. It only works when using the anchor element. I tried using the span and nothing happens. Html is the only thing that I am changing, so I do not think this 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');

}
+5
source share
10 answers

, , , , , href="#". , href="#" href="#bold". , id href, , . , . click , .

0

jQuery 1.1, .on(). .

$(document).ready(function(){
   $("#yourContainer").on("click", "#yourSpanID", function(){
      // The code to make everything bold
   });
});
+3

DOM "click", , , . document.execCommand , , "".

+1

span ; span .

<ul>; . :

<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>

, , , CSS :

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

, . , .

+1

, 'value' , . , .

, , execCommand.

, . .

0

display: inline-block.

0

onclick , : 1) onclick 'a' 'input' ( , ); , 2) . . W3C: http://www.w3.org/TR/html5/webappapis.html#event-handler-content-attributes

. "a", URL- "id" :

#controls a {
 display: block;
 width: 30px;
 height: 30px;
}
0

mousedown , , span. , ( ) ​​, . . jsFiddle. :

$('#'+value).click(function(event){
    document.execCommand( value, false, null);
    $('#rte').focus();
    return false;
}).mousedown(function(e){
    e.preventDefault(); 
});
0

click live on click , .

0

, Doctype:

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

CSS :

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

More articles:


All Articles