load() is unnesting nested UL / LI elements

load() is unnesting nested UL / LI elements

Hi,

Version: jquery-2.1.4.min.js
Browser: Chrome  46.0.2490.86 (64-bit), Firefox 38.4.0

I could not demonstrate this with jsfiddle as you need more than one HTML file to demonstrate the issue. Furthermore, I could not report this in  http://bugs.jqueryui.com/newticket as the drop down does not show version 2.1.4. Only shows up to version 1.11.4.


Name this as loadTest.html:

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.         <meta charset="UTF-8">
  6.         <title>jquery load test</title>
  7. <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  8. </head>
  9. <body>
  10. <a href="#loadListOne" onclick="loadListOne();">Load List One<a>
  11. <a href="#loadListOne" onclick="loadListTwo();">Load List Two<a>
  12. <a href="#loadListOne" onclick="loadListThree();">Load List Three<a>
  13.         <ul>
  14.           <li>One
  15.                 <ul id="listOne">
  16.                 </ul>
  17.           </li>
  18.           <li>Two
  19.                 <ul id="listTwo">
  20.                 </ul>
  21.           </li>
  22.           <li>Three
  23.                 <ul id="listThree">
  24.                 </ul>
  25.           </li>
  26.         </ul>
  27.         <script>
  28.         function loadListOne() {
  29.                 $( "#listOne" ).load( "oneList.html #theListForOne li");
  30.         }

  32.         function loadListTwo() {
  33.                 $( "#listTwo" ).load( "twoList.html #theListForTwo li");
  34.         }

  36.         function loadListThree() {
  37.                 $( "#listThree" ).load( "threeList.html #theListForThree li");
  38.         }
  39.         </script>
  40. </body>
  41. </html>

Name this as oneList.html:

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.         <meta charset="UTF-8">
  6.         <title>jquery load test</title>
  7. </head>
  8. <body>
  9.         <ul id="theListForOne">
  10.           <li>1.A</li>
  11.           <li>1.B</li>
  12.           <li>1.C</li>
  13.         </ul>
  14. </body>
  15. </html>

Name this as twoList.html:

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.         <meta charset="UTF-8">
  6.         <title>jquery load test</title>
  7. </head>
  8. <body>
  9.         <ul id="theListForTwo">
  10.           <li>2.A</li>
  11.           <li>2.B
  12. <ul>
  13. <li>2.B.x</li>
  14. <li>2.B.y</li>
  15. </ul>
  16.           </li>
  17.           <li>2.C</li>
  18.         </ul>
  19. </body>
  20. </html>

Name this as threeList.html:

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.         <meta charset="UTF-8">
  6.         <title>jquery load test</title>
  7. </head>
  8. <body>
  9.         <ul id="theListForThree">
  10.           <li>3.A</li>
  11.           <li>3.B
  12. <ul>
  13. <li>3.B.x</li>
  14. <li>3.B.y
  15. <ul>
  16. <li>3.B.y.i</li>
  17. <li>3.B.y.ii</li>
  18. <li>3.B.y.iii</li>
  19. </ul>
  20. </li>
  21. </ul>
  22.           </li>
  23.           <li>3.C</li>
  24.         </ul>
  25. </body>
  26. </html>

Now put them on httpd, etc

Check that the nesting of ULs inside of LIs are displayed by the browser correctly ( specifically for twoList.html and threeList.html ):


Then load the main page:


... then click on "Load List One", "Load List Two", and "Load List Three" ... in any order.

You will notice that the nesting of the ULs inside of LIs is now un-nested by jquery.load().