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"}]
},{"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:
<script type="text/javascript"> <!-- $(document).ready(function(){ $.getJSON("image/list", function(json){ $.each(json, function(i, image){ $('.dragndropTemplate').clone(true). attr('id', i).appendTo('#dropZone'). fadeIn('slow'); $('#'+i+'>.dnd').attr('src', 'images/thumbs/'+image.name) .attr('id', 'img_'+i).attr('title', image.title).attr('alt', image.title); }); }); }); //--> </script> <p> </p> <!-- SZABLON --> <div class="dragndropTemplate"> <img class="dnd" src="" alt="" /> </div> <div id="dropZone"> </div>
Problem polega na tym, że jquery tworzy tysiące kopii div.dragndropTemplate; po kilka razy z takimi samymi ID:
<div id="0" class="dragndropTemplate" style="display: block;"> </div> <div id="1" class="dragndropTemplate" style="display: block;"> </div> <div id="1" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="2" class="dragndropTemplate" style="display: block;"> </div> <div id="2" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="2" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="2" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="3" class="dragndropTemplate" style="display: block;"> </div> <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="3" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="4" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <div id="5" class="dragndropTemplate" style="opacity: 0; display: block;"> </div> <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

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