Question

我想在用户点击框时显示标题栏。它在I.E.中完美运行8.0但在Firefox 3.6.3中根本没有。

HTML

<html>
 <head> 
  <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="sample.js"></script>
  <style type="text/css">
   @import url('style.css');
  </style>
 </head>
 <body>

  <div id="edit2" style="background:#dddddd;height:200px;width:200px;word-wrap:break-word">
   <div id="editpane">
    <b>blah</b> blah blah
   </div>
  </div>

  <a href="#" onclick="var t = document.getElementsByTagName('html')[0].innerHTML;alert(t);">
save changes
</a>

 </body>
</html>

的Javascript

$(document).ready(function(){
 $("#edit2").live('click',function(){
  if($("#menu").length == 0){
   $("#edit2").before('<div id="menu" style="height:10px;width:100%"><span style="width:10px;background-color:red"></span><span style="width:10px;background:blue"></span></div>');
  }
  if($("#menu2").length == 0){
   $("#edit2").after('<div id="menu2" style="height:10px;width:100%"><span style="width:10px;background:red"></span><span style="width:10px;background:blue"></span></div>');
  }
  this.contentEditable = true;
  this.focus();
 });

 $("#edit2").live('blur',function(){
  $("#menu").remove();
  //$("#menu2").remove();
  this.contentEditable = false;
 });
});

有人能说明为什么它不起作用吗？我已经设法使用类似的代码在两个浏览器中添加/删除新的表行，但我只是看不出为什么这也不起作用。

Answer 1

你到底想要发生什么？您正在添加2个空<span>个元素。

当我在跨度中添加一些内容时，此代码对我来说很好。

实例： http://jsfiddle.net/MxkJb/

Answer 2

考虑到帕特里克关于空跨度标签的说法。我通过向span标签添加内容然后从样式标签中删除高度来解决问题。

JQuery（1.4.2）/ Firefox（3.6.3） - .before和.after不在div上工作

2 个答案: