Question

我的页面在左侧的一列中有一组链接，在右侧的部分中有文本。文本部分标记有一个占位符“ MTX”，该占位符会在页面加载时以及单击任何链接时被替换为内容（所有链接都是单击按钮，调用函数ShowMainText）。从56以后的所有Firefox版本中，它都可以正常工作，但在Chrome或Safari浏览器或Apple iPhone浏览器中，则无法使用。

以下是div标签的代码：

<div class="main_text">
    <div id="C2"><span style="color:black">MTX</span></div>
</div>

这是jQuery代码：

<script>
function ShowMainText(type) {
    var filename = "text_" + type + ".htm"
    $( "#C2" ).hide().load( filename ).fadeIn(500);
}
</script>

这是C2 ID CSS代码：

#C2{
    color: rgb(117,163,126);
    font-family: camphorW01-Light,calibri,arial;
    font-size: 8pt;
    width: auto;
}

这是main_text类的CSS代码：

.main_text {
    grid-column: 8 / 14;
    grid-row: 6 / 19;
    overflow: auto;
    text-align: left;
    justify-items: center;
}

我认为这是jQuery行$( "#C2" ).hide().load( filename ).fadeIn(500);的问题，但我不知道到底是什么问题。

此代码来自一个更大的项目。如果需要一个完整的可复制示例来回答此问题，我可以创建一个问题并将其发布，但我希望有人会知道答案，因为问题似乎仅限于一行。

编辑：Chrome 66开发人员控制台显示以下内容：未捕获的ReferenceError：在加载时未定义ShowMainText。 index.htm（27）。这是第27行：body onload =“ ShowMainText（1）; LinkLight（）;” onclick =“ HideDropdown_B（event）; changeColor（event）; changeColorBDD（event）; getLastGAE（event）; getFocusElement（event）;”>。似乎是问题所在-Chrome 66在页面加载时找不到此内容，但Firefox却找到了。我正在努力，但是任何想法我都会感激。谢谢。

Answer 1

如果您希望fadeIn在元素加载后发生，则必须等待使用load的完成回调来加载它们。

$("#C2").hide().load(filename, function() {
    $(this).fadeIn(500);
});

您可以使用回调的参数来了解load是否成功，有关详细信息，请参阅文档。

跨浏览器jQuery不兼容问题

1 个答案: