JQuery (1.4.2)/Firefox (3.6.3) - .before and .after not working on div
I want a title bar to appear when the user clicks on a box. It works perfectly in I.E. 8.0 but not at all in firefox 3.6.3.
HTML
<html>
<head>
<script type="text/javascript" src="../jquery-1.4.2.min.js">&开发者_JS百科lt;/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;
});
});
Could anyone suggest why it's not working? I have managed to use similar code to add/remove new table rows in both browser but I just can't see why this doesn't also work.
What exactly are you expecting will happen? You are adding 2 empty <span> elements.
This code works fine for me when I put a little content in the spans.
Live example: http://jsfiddle.net/MxkJb/
After taking into account what Patrick said about empty span tags. I solved the problem by adding content to the span tags and then removing the height from the style tags.
加载中,请稍侯......
精彩评论