Jquery div tauschen eventhandler

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Jquery div tauschen eventhandler

    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:
    PHP-Code:
    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:


    PHP-Code:
    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
    "I don't want to belong to any club that would accept me as a member."

    Groucho Marx

  • #2
    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
    Bitte Beachten.
    Foren-Regeln
    Danke

    Kommentar


    • #3
      du meinst so:
      PHP-Code:
      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...
      "I don't want to belong to any club that would accept me as a member."

      Groucho Marx

      Kommentar


      • #4
        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.
        Bitte Beachten.
        Foren-Regeln
        Danke

        Kommentar


        • #5
          THX
          Html Teil des nachzuladenen Bereichs?
          PHP-Code:
          <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
          "I don't want to belong to any club that would accept me as a member."

          Groucho Marx

          Kommentar


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

            Code:
            #productViewerContent #prVideo.itemBox div
            also
            PHP-Code:
            <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
            PHP-Code:
            <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.

            PHP-Code:
            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!
            Bitte Beachten.
            Foren-Regeln
            Danke

            Kommentar


            • #7
              Ok. Also der Quellcode wird auf den ersten Event Click ins Dokument geladen an die stelle
              PHP-Code:
              #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:
              PHP-Code:
              <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:
              PHP-Code:
              <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
              "I don't want to belong to any club that would accept me as a member."

              Groucho Marx

              Kommentar


              • #8
                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.
                Bitte Beachten.
                Foren-Regeln
                Danke

                Kommentar


                • #9
                  THX Wyveres ,
                  bin auch gerade erst dabei in die tieferen Bereiche von jQuery einzusteigen.
                  Melde mich sicher deswegen nochaml an dieser Stelle.
                  "I don't want to belong to any club that would accept me as a member."

                  Groucho Marx

                  Kommentar

                  Lädt...
                  X