Fråga : den dynamiska befolkningen för jquerydhtml utfärdar

Förmiddag I using några beställnings- delar för jquery och den pröva I-förmiddagen dynamiskt att befolka en div som baseras på en php frambragd xml, sparar.  Målet är dynamiskt att befolka div-IDet av ”behållaren” med den nödvändiga htmlen för att fungera riktigt med den del- jqueryuien.  Nedanfört I-förmiddag som fästar dynamiskt de riktiga barnbeståndsdelarna till div-IDet ”behållare”.  Using den dynamiska befolkningen jquerydelarna fungerar inte.  Om jag larmar den dynamiskt frambragda htmlen för ”behållaren”, div-hardcode, som mellan den tomma ”behållaren” div märker allt fungerar, men självfallet som inte är ideal. huvudsaklig

The utfärdar verkar för att vara med jqueryen fungerar efter, som de inte fungerar, när html är dynamiskt fastställd på fönster laddar: trash.droppable, gallery.droppable, deleteImage och recycleImage.  Ui-symbol-kassera " >Delete Image som när jag klickar class=en " ui-symbol för
jag har inklusive mitt fullt att kodifiera och den dynamiskt frambragda htmlen.  Någon hjälp skulle uppskattas väldeliga. för class=" codeSnippet " för

1 för >




Droppable 
rel= " stylesheet "/> " för jqueryui för href= för 
för 
för 
för 
för 
för 
rel= " stylesheet "/> för href= " för  " för jqueryui för href= för 
#gallery {flöte: lämnat; bredd: 65%; minut-höjd: 12em; } * html-#gallery {höjd: 12em; }/* IE6 *
.gallery.custom-state-active {bakgrund: #eee; }
.gallery-li {flöte: lämnat; bredd: 96px; vaddera: 0.4em; förse med marginal: 0 0.4em 0.4em 0; text-arrangera i rak linje: centrera; }
.gallery-li h5 {förse med marginal: 0 0 0.4em; markör: flyttning; }
.gallery-li a {flöte: högert; }
.gallery-li a.ui-icon-zoomin {flöte: lämnat; }
.gallery-liimg {bredd: 100%; markör: flyttning; }
#trash {flöte: högert; bredd: 32%; minut-höjd: 18em; vaddera: 1%;} * html-#trash {höjd: 18em; }/* IE6 *
#trash h4 {fodra-höjd: 16px; förse med marginal: 0 0 0.4em; }
#trash h4 .ui-icon {flöte: lämnat; }
#trash .gallery h5 {skärm: inga; }

" type= " för 
fungera getXmlHttpRequestObject () {
om (window.XMLHttpRequest) {
gå nya XMLHttpRequest tillbaka ();
} annars, om (window.ActiveXObject) {
återgång nya ActiveXObject (”Microsoft.XMLHTTP”);
} annars {
nytt fel för kast (”din webbläsare inte stöttar ajax”);
}
}
var-xhr = getXmlHttpRequestObject ();
fungera getImages () {
om (xhr.readyState-== 4 || xhr.readyState-== 0) {
xhr.open (”FÅ”, ”images.php” som, är riktiga);
xhr.onreadystatechange = handleimages;
(ogiltig) xhr.send;
}
}
fungera handleimages () {
om (xhr.readyState-== 4) {
var-image_div = document.getElementById (”behållare”);
var-xmldoc = xhr.responseXML;
var avbildar = xmldoc.getElementsByTagName (”avbilda”);
var-n_images = images.length
var ul = document.createElement (”ul”);
ul.setAttribute (”klassificera”, ”gallerit ui-hjälpreda-nollställd ui-hjälpreda-clearfix”);
ul.setAttribute (”ID”, ”galleri”);
för (I = 0; i < n_images; i++) {
var-li = document.createElement (”li”);
li.setAttribute (”klassificera”, ”ui-manick-tillfredsställer ui-tränga någon-tr”);
var h5 = document.createElement (”h5”);
h5.setAttribute (”klassificera”, ”ui-manick-titelrad”);
var h5Text = document.createTextNode (avbildar [I] .firstChild.nodeValue);
h5.appendChild (h5Text);
var img = document.createElement (”img”);
img.setAttribute (”src”, ”testimages/” + avbildar [I] .firstChild.nodeValue);
img.setAttribute (”bredd”, ”75”);
img.setAttribute (”höjd”, ”75”);
var a1 = document.createElement (”a”);
a1.setAttribute (”klassificera”, ”ui-symbol ui-symbol-zoomin”);
a1.setAttribute (”href”, ”testimages/” + avbildar [I] .firstChild.nodeValue);
var a1Text = document.createTextNode (”beskåda större”);
a1.appendChild (a1Text);
var a2 = document.createElement (”a”);
a2.setAttribute (”klassificera”, ”ui-symbolen ui-symbol-kasserar”);
a2.setAttribute (”href”, "");
var a2Text = document.createTextNode (”borttagnings avbildar”);
a2.appendChild (a2Text);
li.appendChild (h5);
li.appendChild (img);
li.appendChild (a1);
li.appendChild (a2);
ul.appendChild (li);
}
image_div.appendChild (ul);
var-trash_div = document.createElement (”div”);
trash_div.setAttribute (”ID”, ”avfall”);
trash_div.setAttribute (”klassificera”, ”ui-manick-tillfredsställer ui-påstå-standardinställer”);
var h4 = document.createElement (”h4”);
h4.setAttribute (”klassificera”, ”ui-manick-titelrad”);
var h4Text = document.createTextNode (”avfall”);
h4.appendChild (h4Text);
var spänner över = document.createElement (”spänna över”);
span.setAttribute (”klassificera”, ”ui-symbolen ui-symbol-kasserar”);
var-spanText = document.createTextNode (”avfall”);
span.appendChild (spanText);
h4.appendChild (spänna över);
trash_div.appendChild (h4);
image_div.appendChild (trash_div);
larma (image_div.innerHTML);
}
}
$ (fungera () {
// där är gallerit och avfall
var $gallery = $ (”#gallery”), $trash = $ (”#trash”);
// l5At galleriobjekten vara draggable
$ (”li”, $gallery) .draggable ({
annullering: ”a.ui--icon”,/som klickar en symbol, ska inte invigt släpa
återvänd: ”ogiltigt”, //, när den tappas inte, det ska objektet, återvänder tillbaka till dess initialt placerar
kontroll: $ (”#demo-inrama”), .length? ”#demo-inrama”: ”dokument”, // pinne som skainramas om gåva
hjälpreda: ”klon”,
markör: ”flyttning”,
});
// l5At avfall vara droppable och att acceptera galleriobjekten
$trash.droppable ({
acceptera: ”#gallery > li”,
activeClass: ”ui-påstå-markera”,
tappa: fungera (ev, ui) {
deleteImage (ui.draggable);
}
});
// l5At gallerit vara droppable som väl och att acceptera objekt från avfall
$gallery.droppable ({
acceptera: ”#trashli”,
activeClass: ”beställnings--påstå-aktiv”,
tappa: fungera (ev, ui) {
recycleImage (ui.draggable);
}
});
// avbildar radering fungerar
var-recycle_icon = ”Recycle image”;
fungera deleteImagen ($item) {
$item.fadeOut (fungera () {
var $list = $ (”ul”, $trash) .length? $ (”ul”, $trash): $ (””) .appendTo ($trash);
$item.find (”a.ui-icon-trash”) .remove ();
$item.append (recycle_icon) .appendTo ($list) .fadeIn (fungera () {
$item.animate ({bredden: ”48px”}) .find (”img”) .animate ({höjd: ”36px”});
});
});
}
// avbildar återanvänder fungerar
var-trash_icon = borttagnings " för title= " ”för Delete image”;
fungera recycleImagen ($item) {
$item.fadeOut (fungera () {
$item.find (”a.ui-icon-refresh”) .remove ();
$item.css (”bredd”, ”96px”) .append (trash_icon) .find (”img”) .css (”höjd”, ”72px”) .end () .appendTo ($gallery) .fadeIn ();
});
}
// avbildar granskar fungerar och att visa ui.dialogen som används som ett modal fönster
fungera viewLargerImagen ($link) {
var-src = $link.attr (”href”);
var-titel = $link.siblings (”img”) .attr (”alt”);
var $modal = $ (”img [src$= " ”+src+””]”);
om ($modal.length) {
$modal.dialog (”öppna”),
} annars {
var img = $ (” width= " ”för ”)
.attr (”src”, src) .appendTo (”förkroppsliga”);
setTimeout (fungera () {
img.dialog ({
titel: titel,
bredd: 400,
modal: riktigt
});
} 1);
}
}
// beslut symbolsuppförandet med händelsedelegationen
$ (”ul.gallery > li”) .click (fungera (ev) {
var $item = $ (denna);
var $target = $ (ev.target);
om ($target.is (”a.ui-icon-trash”)) {
deleteImage ($item);
} annars, om ($target.is (”a.ui-icon-zoomin”)) {
viewLargerImage ($target);
} annars, om ($target.is (”a.ui-icon-refresh”)) {
recycleImage ($item);
}
återgångt falskt;
});
});
window.onload = fungerar () {
getImages ();
}



class= " demoui-manick ui-hjälpreda-clearfix " för 


html för >

dynamic för <-/html>

1 för >

			
		ui-hjälpreda-clearfix för class= för 

	
Jellyfish.jpg
	height= " 75 " för width= " 75 " för 
	" ui-symbol för class= " för View Larger
	class= " ui-symbol för Delete Image

tst5.jpg<-/h5>View LargerDelete Image
tst4.jpg<-/h5>View LargerDelete Image
tst.jpg<-/h5>View " ui-symbolen ui-symbol-kasserar " class= class= "" href= LargerDelete Image
View " ui-symbolen ui-symbol-kasserar " class= class= "" href= LargerDelete Image
View LargerDelete Image<-/a>
tst2.jpg<-/h5>View LargerDelete Image
tulips.jpg<-/h5>View LargerDelete Image
test.jpg<-/h5>View " ui-symbolen ui-symbol-kasserar " class= class= "" href= LargerDelete Image
View " ui-symbolen ui-symbol-kasserar " class= class= "" href= LargerDelete Image
View LargerDelete Image<-/a>
isl3.jpg<-/h5>View LargerDelete Image
wave.jpg<-/h5>View LargerDelete Image
tst3.jpg<-/h5>View " ui-symbolen ui-symbol-kasserar " class= class= "" href= LargerDelete Image
View " ui-symbolen ui-symbol-kasserar " class= class= "" href= LargerDelete Image
View LargerDelete Image<-/a>
is2.jpg
View " ui-symbolen ui-symbol-kasserar " class= class= "" href= LargerDelete Image
Penguins.jpg
View " ui-symbolen ui-symbol-kasserar " class= class= "" href= LargerDelete Image
cancun.jpg
View " ui-symbolen ui-symbol-kasserar " class= class= "" href= LargerDelete Image
lighthouse.jpg
View " ui-symbolen ui-symbol-kasserar " class= class= "" href= LargerDelete Image
tstisland1.jpg
View " ui-symbolen ui-symbol-kasserar " class= class= "" href= LargerDelete Image
jellyfish.jpg<-/h5>View " ui-symbolen ui-symbol-kasserar " class= class= "" href= LargerDelete Image
building.jpg
View " ui-symbolen ui-symbol-kasserar " class= class= "" href= LargerDelete Image
Honoren testimages src= "/Honor%20Recital%202008%20114.jpg 75 " >View LargerDelete Image
penguins.jpg<-/h5>View LargerDelete Image
Lighthouse.jpg<-/h5>View LargerDelete Image
Tulips.jpg
View " ui-symbolen ui-symbol-kasserar " class= class= "" href= LargerDelete Image
View LargerDelete Image
TrashTrash<-/span>

" klar "

Svar : den dynamiska befolkningen för jquerydhtml utfärdar

Sam - varför inte
$ (”#container”) .get (”images.php”, fungerar (theXML) {
 $ (”avbilda”, theXML), .each (
  fungera (I) {
     här vi har kretsa, med I indexet, om nödvändigt och ”denna” varje avbilda
  }
);


Om du ser till tutorialen, jQueryen ger dig tankeskapelsenågot liknande

$ (denna) .find (”…”) .attr (”. ”);
ganska än ta fram xhr.responseXMLen alls