Question

我正在尝试将不同的内容加载到div中，我所拥有的刷新代码与此类似：http://jsfiddle.net/TbJQ3/6/但更复杂，需要考虑填充和magin等。

不同之处在于，在我的实际代码中，我使用 .load（）将内容提供给我的div而不是empty（）和append（）。

当我的页面首次加载时，我调用 resizeContainer（）函数来渲染我的布局动态设置我的DIV的大小，一切看起来都不错。我看了萤火虫，这就是我得到的（所有尺寸都在那里，由我的功能设定）：

<div id="divWrapper" class="fullscreen">
  <div id="divTop" class="Top " style="height: 0px;"> </div>
    <div id="divContainer" class="Container round" style="width: 1024px; height: 560px;">
      <div id="divContent" class="Content round" onclick="javascript: jQfn.testclick();" style="width: 701px; height: 542px;"> Content </div>
      <div id="divQuery" class="Query round" onclick="javascript: jQfn.testclick();" style="width: 292.2px; height: 558px;"> Query </div>
      <div id="divStatus" class="Status " onclick="javascript: jQfn.testclick();" style="width: 701px; float: left;"> Status </div>
    </div>
</div>

我做了一个测试功能，基本上交换内容只是为了测试概念......

jQfn.testclick = function(){
  if (jQ.busy == true) {
     console.log('Using busy.jsp');
     jQ('#divContainer').load('busy.jsp');
     jQ.busy = false;
  } else {
     console.log('Using login.jsp');
     jQ('#divContainer').load('login.jsp');
     jQ.busy = true;
  }
  jQ(window).trigger('resize');
}

但是，如果我点击两次只是为了将其交换回原始内容，我的 resizeContainer 功能将不会呈现任何内容。

我过去5个多小时一直在讨论这个问题，我试图使用：

空，追加
分离
以多种不同方式调用resize函数
以多种不同方式调用我的自定义resizeContainer函数
以上所有内容的组合以及更多

我注意到在我加载内容后，jQuery 无法找到重新插入的div ...这可以解释为什么我的 resizeContainer 功能无法解决正确设置宽度和高度......但为什么呢？我可以在屏幕上的div和萤火虫中看到它......

这是我在交换内容后看到的内容，显然样式不存在，因为我的自定义 resizeContainer 功能无法找到div。

<div id="divWrapper" class="fullscreen">
  <div id="divTop" class="Top " style="height: 0px;"> </div>
  <div id="divContainer" class="Container round" style="width: 1024px; height: 560px;">
    <div id="divContent" class="Content round" onclick="javascript: jQfn.testclick();"> Content </div>
    <div id="divQuery" class="Query round" onclick="javascript: jQfn.testclick();"> Query </div>
    <div id="divStatus" class="Status " onclick="javascript: jQfn.testclick();" style="width: 701px; float: left;"> Status </div>
  </div>
</div>

我之所以知道jQuery找不到我的div，是因为我使用了以下代码，它记录了一些空元素：

var content = jQuery('#divContent');
console.log(content);

可能有什么不对？我甚至尝试在加载新内容之前手动分离这些DIV。

Answer 1

Load是一个Ajax方法，并且在使用ajax方法时插入来自外部文件的内容而不是append方法，在大多数情况下你必须使用jQuery的live（）;获取对插入的DOM元素的访问权。

第一次使用Ajax插入内容时，尝试使用detach和其中一个append方法而不是Ajax重新插入它，否则它将无法工作，因为加载只是重新插入新的DOM元素，而不是你刚才的内容分离。

如果我删除并添加回来jQuery无法找到相同的div？

1 个答案: