Jquery div tauschen eventhandler

[mcmurphy]

Hi,
ich möchte den Inhalt eines div auf click gegen Inhalte tauschen, welche ich mir von einer externen Seite hole.
Das hier klappt schon mal gut:

jQ = jQuery.noConflict();
jQ("#productViewerContent #prVideo.itemBox div").click(function(){  
    jQ("#prVideo *").fadeOut(function(){
          jQ("#prVideo").load("details.VideoXL.php #VideoXL01").fadeIn();
    })
 }); 

fadet alles in dem div#prVideo aus und holt mir das div #VideoXL01 in das div#prVideo
Nur zurück habe ich ein Problem:

jQ("#VideoXL01").click(function(){  alert("");// wird schon nicht ausgeführt
// der code um mir andere inhalte zu holen, z.B. den ursprünglichen Inhalt
   jQ("#prVideo").load("details.VideoXL.php #VideoOverview").fadeIn();
}); 

Kann mich einer anstubsen aufdas ich meinen Denkfehler finde?
Lg

[Wyveres]

könnte daran liegen das dass element zur generierung noch nicht existert und somit der click event nicht ans element gebunden wird.

eventuell müsstest du den click event nachdem laden an das div binden

[mcmurphy]

du meinst so:

jQ('#prVideo').load('xtemplates/products/details.VideoXL.php #VideoXL01').fadeIn();
  jQ('#VideoXL01').bind('click', function() {
      alert('User clicked on "VideoXL01."');
  }); 

damit funktioniert das binden leider nicht...

[Wyveres]

nein eigentlich wenn er mit dem event load fertig ist. also z.b. im ajaxstop oder im function teil des load. interessant währe hier auch wie der HTML teil davon aussieht.

[mcmurphy]

THX
Html Teil des nachzuladenen Bereichs?

<div id="VideoXL01">
<h3 id="back">hi</h3>
<img src='/videoDetail.png' alt=""/>
</div> 

Oder was meinst du, nach Ziel.html nach der jQ manipulation?
lg,
McM

[Wyveres]

Ok. Also der Quellcode wird auf den ersten Event Click ins Dokument geladen an die stelle

#productViewerContent #prVideo.itemBox div

also

<div id="productViewerContent">
<div id="prVideo.itemBox">// der punkt da is ein wenig irreführend! da punkte classen einleiten 
<div>hier wird der ajax content nachgeladen</div>
</div>
</div> 

du bindes das click an das innerste div.
nun läd er nach dem click folgendes

<div id="productViewerContent">
<div id="prVideo.itemBox">
<div>
<div id="VideoXL01"> 
<h3 id="back">hi</h3> 
<img src='/videoDetail.png' alt=""/> 
</div> 
</div>
</div>
</div> 

so sollte das dann ungefähr aussehen.

jQ('#prVideo').load('xtemplates/products/details.VideoXL.php #VideoXL01',function(){
  jQ('#VideoXL01').bind('click', function() { 
      alert('User clicked on "VideoXL01."'); 
  }); 
}).fadeIn(); 

!Vorsicht das ganze ist nicht ganz korrekt!

[mcmurphy]

Ok. Also der Quellcode wird auf den ersten Event Click ins Dokument geladen an die stelle

#productViewerContent #prVideo.itemBox div 

nicht ganz - die ganze Aktion soll erfolgen wenn auf #productViewerContent #prVideo.itemBox div geklickt wird

<div id="productViewerContent">
<div id="prVideo.itemBox">// der punkt da is ein wenig irreführend! da punkte classen einleiten
<div>hier wird der ajax content nachgeladen</div>
</div>
</div>

die Html sieht so aus:

<div id="prVideo" class="itemBox"> 

jQ('#prVideo').load('xtemplates/products/details.VideoXL.php #VideoXL01',function(){
jQ('#VideoXL01').bind('click', function() {
alert('User clicked on "VideoXL01."');
});
}).fadeIn();

geht in die Richtung - nur wird das alert sofort ausgeführt
Soll erst beim nächsten klcik erfolgen

Was ich genau haben will ist folgendes:
habe eine div box #prVideo mit Content.
wenn in den Content geklickt wird soll der Content ausgetauscht werden.
Das sähe dann so aus:

<div id="prVideo" class="itemBox">
   <div id="VideoXL01"> 
      <h3 id="back">hi</h3> 
     <img src='/videoDetail.png' alt=""/> 
   </div> 
</div> 

wobei das img jetzt nur ein Platzhalter für weiteren Html Inhalt ist.
Wenn ich das nächste mal auf #VideoXL01 (oder ein Kind element, Selektor muss ich dann noch anpassen) klicke will ich den urspünglichen content wieder nach #prVideo geladen werden.

In deinem Beispiel würde das direkt erfolgen

[Wyveres]

dann würd ich sagen .ajaxStop() – jQuery API
setzt dich damit mal auseinander.

ich arbeite jetzt seit einem Jahr mit jQuery und hab bis heute auch noch nicht alles über das Event binding verstanden.

aber soweit mein verständniss ausreicht sollte das event jQ().click() erst nachdem er den anderen content geladen und in den dom gehängt hat, an das element gebunden werden da es dann ja auch erst ansprechbar ist.

[mcmurphy]

THX Wyveres ,
bin auch gerade erst dabei in die tieferen Bereiche von jQuery einzusteigen.
Melde mich sicher deswegen nochaml an dieser Stelle.