JQuery (1.4.2) / Firefox (3.6.3) - .fore и .after не работает на div - PullRequest
0 голосов
/ 01 июня 2010

Я хочу, чтобы строка заголовка появлялась, когда пользователь нажимает на поле. Это прекрасно работает в 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;
 });
});

Кто-нибудь может подсказать, почему он не работает? Мне удалось использовать похожий код для добавления / удаления новых строк таблицы в обоих браузерах, но я просто не понимаю, почему это тоже не работает.

Ответы [ 2 ]

2 голосов
/ 01 июня 2010

Что именно вы ожидаете, произойдет? Вы добавляете 2 пустых <span> элемента.

Этот код отлично работает для меня, когда я помещаю немного содержимого в промежутки.

Живой пример: http://jsfiddle.net/MxkJb/

0 голосов
/ 02 июня 2010

После того, как Патрик сказал о пустых тегах span. Я решил проблему, добавив содержимое в теги span, а затем удалив высоту из тегов стиля.

...