jquery html() 不适用于 Chrome 中的定位元素答案

【问题标题】：jquery html() not working on positioned element in Chromejquery html() 不适用于 Chrome 中的定位元素
【发布时间】：2010-07-09 16:03:32
【问题描述】：

我有一个分段命名对话框，我正在尝试通过 ajax 添加内容。元素的位置如下：

<div id="modal" style="height:100%; width:100%; position:fixed; z-index:1; left:0; top:0; display:none;">

 <div style="position:fixed; top:50%; left:0; width:100%;">
     <div style="height:150px; width:300px; margin:auto;">
         <div>Processing</div>
            <div>
            <p id="dialog">Please Wait...</p>
            </div>
        </div>
    </div>

</div>

注意我在打电话：

$('#modal').show("fast");

在尝试向其添加内容之前。

然后我尝试像这样添加到对话段落中：

$.post(
  'processor.php', 
  queryString, 
  function(data){
   alert('data:'+data);
   $('#dialog').html(data);
  }
 )

它不会在对话段落中使用innerHTML。我尝试将内容添加到未定位的其他元素，并且效果很好。

有人知道为什么这不起作用吗？或者有什么解决办法？

附：我知道我应该将我的样式移到样式表中，我通常会在最后这样做。

更新

我想让你知道我只有 1 个对话框 ID，它实际上是在删除 #dialog 中的文本，只是没有添加任何内容。

我也打电话给document.ready

你可以看到页面here点击最底部的提交按钮看到它发生了。

更新2

这在 FF 和 IE 中可以正常工作，只是在 chrome 中无法正常工作。

【问题讨论】：

你有多个id="dialog"元素吗？
@Nick 不只是一个，谢谢。
你能发个SSCCE吗？
如果将 id 更改为 'dialog' 以外的其他内容，它仍然会失败吗？
奇数 - 在您的示例中，文本在调整页面大小后显示。

标签： javascript jquery google-chrome innerhtml

【解决方案1】：

如果您查看控制台日志，文本就在那里。尝试将 css 添加到对话框中，例如：

#dialog { display:block; width:auto; height:auto;}

【讨论】：

hmmmm.. 不工作，在控制台中尝试过.. 我在里面找到了这个：$('#dialog').html(); “您没有填写所有必填字段。请仔细检查您是否填写了所有标有 *
的必填字段
"
我试过了，没用。它在那里，它在调整浏览器大小后出现。我认为这可能是一个 chrome 错误？
我想如果有办法让我强制浏览器重新渲染它会修复它。
您如何查看控制台日志？

【解决方案2】：

 $(document).ready(function() {
   // do stuff when DOM is ready

   //Is your code called inside here or after this function is executed? 
   //If not, it should be.
 });

【讨论】：

【解决方案3】：

隐藏它，然后更改文本，然后再次显示它似乎可以让它工作。您必须同时为 hide 和 show 设置动画才能使其正常工作：

$('#mydialog').hide("slow",function(){
                $('#mydialog').html(data);
                $('#mydialog').show("slow");
            });

它看起来不是很优雅。如果有人有，我希望有更好的解决方案。

编辑：

我想出的一个更好看的解决方法是使用 2 个对话框并在我更改文本时切换它们。

【讨论】：