FireFox 和 XHTML 中的 jQuery 困难答案

【问题标题】：jQuery difficulties in FireFox & XHTMLFireFox 和 XHTML 中的 jQuery 困难
【发布时间】：2009-07-24 17:37:36
【问题描述】：

我最近从 HTML 切换到 XHTML...不要让我开始讨论“为什么”——我们只是说这不是一个选项。随便...

当我是 HTML 时，这个函数在 IE 和 FF 中运行良好，但现在使用 XHTML 我在 FF 中得到以下错误：

heightElement is undefined

现在这是我定义 heightElement

的语句

function revBars(isEFBOutput, isIXPPreview) {
  if (!isIXPPreview) isIXPPreview = false;
  var heightElement =
    $('<div id="resizeDetectingElement" style="position:absolute; left:-9999999px height:1em;">&#160;</div>')
      .prependTo('body')
      .get(0);
  heightElement.currentHeight = heightElement.offsetHeight;  // FireBug says the error is here.
  insert();
  window.onresize = refresh;
  setInterval(
    function() {
        if (heightElement.currentHeight != heightElement.offsetHeight) {
            heightElement.currentHeight = heightElement.offsetHeight; refresh();
        }
    }, 500);

function insert() {
    var px = "px";
    var color = (document.styleSheets[0].href.match("ftidStyleDay")) ? "black" : "white";
    $revMarks = $('.RevMark').removeClass('RevMark').addClass('UnMarked');
    if (!$revMarks.length) $revMarks = $('.UnMarked');
    $revMarks.each(function() {
        $('<div class="RevBar" />').css({
            'background-color': color,
            'width': '2px', 'position': 'absolute',
            'left': (isEFBOutput && !isIXPPreview ? '.25em' : '-.75em'),
            'height': this.offsetHeight,
            'top': offset(this) + px
        }).prependTo('body');
    });
}

function refresh() { $('.RevBar').remove(); insert(); }

function offset(obj) {
    var top = 0;
    if (obj.offsetParent) {
        do {
            top += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    if (document.all && (!isEFBOutput || (isEFBOutput && isIXPPreview))) top -= 15;
    return top;
}

}

任何想法为什么这会在 FF 中的 XHTML 中引发错误？它在 IE 中仍然有效。

编辑：同样，这段代码在 FF 和 IE 中完美运行，直到我切换到 XHTML。 Firefox 仍然为 XHTML 创建 DOM，对吧？

【问题讨论】：

对我来说没有错误。你什么时候打电话给这个？
您不会尝试在该范围/功能之外使用 heightElement，是吗？
错误在哪里产生？您是否尝试在其所在范围之外使用 heightElement？如果是范围界定问题，则与使用 xhtml 无关——您是否同时进行了其他更改？
我们能看到“（更多的东西...）”吗？？
@J-P：问一下，你就会被我写得不好的代码淹没。 ;-)

标签： javascript jquery firefox xhtml

【解决方案1】：

我重写了您的一些示例，因为您有错误并且示例中没有的函数调用不完整：

$(document).ready( function(){
    function revBars(isEFBOutput, isIXPPreview){
        var test = "<div id=\"someElement\">whatever</div>";
        $('body').prepend(test).get(0);
        var heightElement = $('#someElement');
        console.log( heightElement);
    }
    revBars();
});

此时heigthElement 存在并且div 被添加到DOM。请提供正确的问题以便解决。

更新

//var heightElement = $('<div id="resizeDetectingElement">whatever</div>').prependTo('body').get(0); 
// this statement doesn't work
var heightElement = $('body').prepend('<div id="resizeDetectingElement">whatever</div>'); 
// this does
console.log(heightElement);

这与第一个例子基本相同。

您提出的请求是在元素主体之前添加一个div，然后获取主体的第一个元素。 prependTo 已经返回匹配的项目，因此获取无关紧要。而且您在正文之前附加了一个元素，因此您的变量为空是正常的。

试试我的代码并删除反对票，因为没有多少人对你的超级代码有这种耐心。

更新 2 这是 prepend() 和 prependTo() 的用法示例。

<html>
<head>
    <script type="text/javascript" src="../lib/jquery/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready( function(){
        $("#test_A").prepend('<div id=\'test_B\'>B</div>');
        $("#test_C").prependTo( $('#test_A'));
        var x = $('<div id="resizeDetectingElement">D</div>').prependTo('body').get(0);
        console.log( x ); // returns the div
        $(x).append('some text'); //works
    });
</script>
</head>
<body>
<div id='test_A'>A</div>
<div id='test_C'>C</div>
</body>
</html>

我希望这将有助于使您的代码正常工作。使用 $(heightElement) 而不仅仅是 heightElement，它是 div 而不是 jQuery 对象。

【讨论】：

您错误地认为我希望函数在 $(document).ready 上运行。您的 .get(0) 没有做任何事情 - 它从未分配给变量或被操纵。 $('body').prepend(test); 做同样的事情。你能比你有错误更具体吗？在哪里？什么错误？我正在尝试解决这个问题，“你有错误”并没有帮助。 请提供正确的问题？什么是不正确的？我正在寻求帮助，并尽我所能表达我的问题。
希望我可以编辑 cmets - 没有意识到在 cmets 中不起作用。 Mea Culpa Maxima。
@ScottSEA 您的函数没有结束，有未使用的参数，并且您的示例正在使用对未定义函数的调用。也许 IE 没有设置为向您显示 javascript 错误，但您发布的代码至少有一些。
@Elzo Valugi：很酷。我已经发布了整个函数（以及嵌套函数）。如果您能具体指出我的代码中的任何错误，我将不胜感激。
@ScottSEA 我的 IDE 说你在插入函数之前缺少一个括号，在第一个函数体之后