I hope someone can shed some light on this.  I'm working on a mobile app using jQuery Mobile with jquery 1.10.2.  This app is phonegapped and shortly after installing on various mobile devices noticed that memory usage would rapidly go through the roof.  After days and days of tracking through my code I'm fairly convinced there is a bug in jquery leading to Detached DOM elements.

My last and final test I built a *tiny* web page - no included scripts, no jquery, just simple html (the simplest you can make), and a button to insert html into a div via its ID.  I used document.getElementById() and .innerHTML = some html markup. This was ran in various browsers, on various devices, on various OSs... blah blah.. and there was no change in the amount of memory being taken up (no leaks) - I clicked the insert button 1000s of times.

Then, I *included* the jquery library.. just included it - did not call any jquery functions, still used the getElementByID() and innerHTML = some html markup.  and each time I clicked on the insert button I lost a little memory.  huh!?

Knowing that $.empty() releases some jquery cache related things I replaced getElementByID() and innerHTML with: $('#myid').empty().html(some html markup).  Clicking on the insert button continued to suck down memory.  Huh!?

Then, just out of curiosity I upgraded jquery to 2.0.3.. same issue, but memory disappears about 30% faster! huh!?

What gives?  The app I'm building acquires JSON data from our server and then creates HTML from the JSON and inserts it into a jquery mobile page. I don't see any fix for this - but have to believe that other apps out there using jquery aren't sucking down memory - Apple lets these apps into the store? My app typically loads 80-100 "tiles" each composed of 17 DOM elements - so when jQuery doesn't release them I'm leaking huge amounts of memory.  I'm sure this is something I'm doing, but I just can't see that from the radically reduced test case.

I'm not a jsfiddler so here is the 33 lines of html/javascript that show the problem. http://dev.drinkupdt.com/cowan/test_jquery.html

Additionally: If you use the Chrome Debugger you can see the DOM Elements build up each time the insert button is clicked.  Of course garbage collection is taking place and the debugger has a garbage collection button.  The Timeline also shows the increased memory usage.  If using a simple OS memory viewer - clicking on the insert button eats up the memory and occasionally you can see garbage collection take place, but regardless memory keeps disappearing.

Thanks for any help or direction,

Scott