如果我删除并重新添加它，jQuery无法找到相同的div？

Question

I'm attempting to load different content into a div, the refresh code I have is quite similar to this: http://jsfiddle.net/TbJQ3/6/ but is more complex, it takes padding and magin etc into account.

The difference is that in my actual code, I used .load() to feed the content into my div rather than empty() and append().

When my page first loaded, I call my resizeContainer() function to render my layout dynamically set the size of my DIVs, everything looks good. I looked at firebug and this is what I got (all the sizes are there, set by my function):

<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>

I made a test function to basically swap the content just to test the concept out...

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');
}

However, if i click it twice just to swap it back to the original content, my resizeContainer function won't render anything at all.

I've been hammering this problem for the past 5+ hours now, I tried to use:

• empty, append
• detach
• calling the resize function in many different ways
• calling my custom resizeContainer function in many different ways
• combination of all of the above and some more

I noticed that after i loaded my content, jQuery was unable to find the divs that got reinserted anymore... which would explain why my resizeContainer function couldn't set the width and height properly... But why? I could see it on the div on the screen as well as in the firebug...

This is what I see after i swap the content, obviously the styles is not present, as my custom resizeContainer function couldn't find the 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>

The reason why I know jQuery couldn't find my divs, is because I used the following code, and it logged some empty element:

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

What could be wrong? I even tried to manually detach those DIVs before loading in the new content.

Answer 1

Load is an Ajax method, and inserts content from external files, when using ajax methods and not the append methods you will in most cases have to use jQuery's live(); to gain access to the inserted DOM elements.

Once the content is inserted the first time with Ajax, try using detach and one of the append methods instead of Ajax to reinsert it, otherwise it will not work, as load just reinserts new DOM elements, and not the content you just detached.