W zasadzie nawet nie wiem jak mam nazwać ten temat. Przekazuję sobie dane poprzez JSON:

Kod
[{"id":"14","name":"4868a3b58af2f.jpg","title":"We were good together.","author":"Virti","position":"1"

},{"id":"15","name":"4868a4ae2367d.jpg","title":"Just do it.","author":"Virti","position":"2"},{"id"

:"16","name":"4868cc8e9546d.jpg","title":"Feel","author":"Virti","position":"3"},{"id":"17","name":"4868cdd086bb8

.jpg","title":"I saw an angel.","author":"Virti","position":"4"},{"id":"18","name":"4868cf2aca642.jpg"

,"title":"Dirty love.","author":"","position":"5"},{"id":"19","name":"4868cf7642b9e.jpg","title":"Would

 you like to come in?","author":"","position":"6"},{"id":"20","name":"4868cfbf89894.jpg","title":"Nobody

 knows what that\\\\\\'s mean.","author":"","position":"7"},{"id":"21","name":"4868cfd676766.jpg","title"

:"Can I?","author":"Virti","position":"8"},{"id":"22","name":"4868cfeb89894.jpg","title":"Ouch! My nose

!","author":"","position":"9"},{"id":"23","name":"4868d012423b5.jpg","title":"Going to the end.","author"

:"Virti","position":"10"},{"id":"24","name":"486917ada193a.jpg","title":"Forgive me. Please.","author"

:"","position":"11"},{"id":"25","name":"4869189e496a8.jpg","title":"And hope is gone.","author":"","position"

:"12"}]


Oraz kod HTML+JS:

  1. <script type="text/javascript">
  2. <!--
  3. $(document).ready(function(){
  4.  $.getJSON("image/list", function(json){
  5.   $.each(json, function(i, image){
  6.   $('.dragndropTemplate').clone(true).
  7.   attr('id', i).appendTo('#dropZone').
  8.   fadeIn('slow');
  9.    
  10.   $('#'+i+'>.dnd').attr('src', 'images/thumbs/'+image.name)
  11.   .attr('id', 'img_'+i).attr('title', image.title).attr('alt', image.title);
  12.   });
  13.  });
  14. });
  15. //-->
  16.  
  17. <h1>Zarządzaj!</h1>
  18. <p>
  19.  <a href="image/add">Dodaj nowe zdjęcie.</a>
  20. </p>
  21.  
  22. <!-- SZABLON -->
  23. <div class="dragndropTemplate">
  24.  <img class="dnd" src="" alt="" />
  25. </div>
  26.  
  27. <div id="dropZone">
  28. </div>





Problem polega na tym, że jquery tworzy tysiące kopii div.dragndropTemplate; po kilka razy z takimi samymi ID:

  1. <div id="0" class="dragndropTemplate" style="display: block;">
  2. </div>
  3. <div id="1" class="dragndropTemplate" style="display: block;">
  4. </div>
  5. <div id="1" class="dragndropTemplate" style="opacity: 0; display: block;">
  6. </div>
  7. <div id="2" class="dragndropTemplate" style="display: block;">
  8. </div>
  9. <div id="2" class="dragndropTemplate" style="opacity: 0; display: block;">
  10. </div>
  11. <div id="2" class="dragndropTemplate" style="opacity: 0; display: block;">
  12. </div>
  13. <div id="2" class="dragndropTemplate" style="opacity: 0; display: block;">
  14. </div>
  15. <div id="3" class="dragndropTemplate" style="display: block;">
  16. </div>
  17. <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;">
  18. </div>
  19. <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;">
  20. </div>
  21. <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;">
  22. </div>
  23. <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;">
  24. </div>
  25. <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;">
  26. </div>
  27. <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;">
  28. </div>
  29. <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;">
  30. </div>
  31. <div id="4" class="dragndropTemplate" style="display: block;">
  32. </div>
  33. <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;">
  34. </div>
  35. <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;">
  36. </div>
  37. <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;">
  38. </div>
  39. <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;">
  40. </div>
  41. <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;">
  42. </div>
  43. <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;">
  44. </div>
  45. <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;">
  46. </div>
  47. <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;">
  48. </div>
  49. <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;">
  50. </div>
  51. <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;">
  52. </div>
  53. <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;">
  54. </div>
  55. <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;">
  56. </div>
  57. <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;">
  58. </div>
  59. <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;">
  60. </div>
  61. <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;">
  62. </div>
  63. <div id="5" class="dragndropTemplate" style="display: block;">
  64. </div>
  65. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  66. </div>
  67. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  68. </div>
  69. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  70. </div>
  71. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  72. </div>
  73. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  74. </div>
  75. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  76. </div>
  77. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  78. </div>
  79. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  80. </div>
  81. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  82. </div>
  83. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  84. </div>
  85. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  86. </div>
  87. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  88. </div>
  89. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  90. </div>
  91. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  92. </div>
  93. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  94. </div>
  95. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  96. </div>
  97. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  98. </div>
  99. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  100. </div>
  101. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  102. </div>
  103. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  104. </div>
  105. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  106. </div>
  107. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  108. </div>
  109. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  110. </div>
  111. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  112. </div>
  113. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  114. </div>
  115. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  116. </div>
  117. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  118. </div>
  119. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  120. </div>
  121. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  122. </div>
  123. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">
  124. </div>
  125. <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;">


Zawartość divów wyciąłem, żeby kodu nie było za dużo. Pozatym to oczywiście nawet nie połowa tego, co wyświetla mi firebug w divie #dropZone.



Wie ktoś, co może być przyczyną i jak to naprawić? Jestem absolutnie zielony z jQuery, czy jakiegokolwiek JavaScript.

Z góry dzięki i pozdrawiam winksmiley.jpg



EDIT: Problem rozwiązany; Wystarczyło dodać przed appendTo('#dropZone') to: removeClass('dragndropTemplate')