Javascript重新加載jquery與php呼叫

我有一個問題，我一直在努力解決過去的日子。我有一個Jquery，用於更新HTML並在div標籤內創建新內容。事情是，JavaScript不適用於生成的代碼。換句話說，我可以把Php給我的確切輸出，直接放在html代碼中，它可以工作，但是如果它來自php，而頁面運行時它不會工作，它不會顯示在幻燈片jflow中正確的圖像。Javascript重新加載jquery與php呼叫

下面是HTML頭

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script> 
    <script src="js/jquery.robwalsh.randomImageOnload.js" type="text/javascript" charset="utf-8"></script> 
    <script src="js/application.js" type="text/javascript" charset="utf-8"></script> 
    <script src="js/jquery.flow.1.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("div#controller").jFlow({ 
       slides: "#slides", 
       width: "785px", 
       height: "480px" 
     }); 
    }); 


    </script> 
    <script type="text/javascript"> 
    /* SLIDESHOW AT HOMEPAGE */ 
    function slideSwitch() { 
     var $active = $('#slideshow IMG.active'); 

     if ($active.length == 0) $active = $('#slideshow IMG:last'); 

     var $next = $active.next().length ? $active.next() 
      : $('#slideshow IMG:first'); 

     $active.addClass('last-active'); 

     $next.css({opacity: 0.0}) 
      .addClass('active') 
      .animate({opacity: 1.0}, 1000, function() { 
       $active.removeClass('active last-active'); 
      }); 
    } 

    $(function() { 
     setInterval("slideSwitch()", 5000); 
    }); 
    </script> 
    <script type="text/javascript"> 

    /* Function to show/hide the side menu for all images */ 
    function showDIV(e) 
    { 
     var notEmpty = true; 
     var count = 0; 
     while(document.getElementById('subCat'+count) != null) 
     { 
      document.getElementById('subCat'+count).style.display = 'none'; 
      count++; 
     } 
     document.getElementById(e).style.display = 'block'; 
    } 
    /* MENU INTERACTION */ 
    function showContent(cmd, id) 
    { 
    if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
     } 
    else 
     {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
     document.getElementById("contentMain").innerHTML=xmlhttp.responseText; 
     document.getElementById("controller").innerHTML=xmlhttp.responseText; 
     } 
     } 
    xmlhttp.open("GET","getMain.php?cmd="+cmd+"&id="+id,true); 
    xmlhttp.send(); 
    } 

    </script> 
    <script type="text/javascript"> 

     var _gaq = _gaq || []; 
     _gaq.push(['_setAccount', 'UA-21909616-1']); 
     _gaq.push(['_setDomainName', '.karimtabar.com']); 
     _gaq.push(['_trackPageview']); 

     (function() { 
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
     })(); 

    </script> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1" /> 
    <link rel="stylesheet" type"text/css" href="css/stylesheet.css" /> 
    <link rel="shortcut icon" href="logo/icon.jpg"> 
    <title>KARIM V TABAR PHOTOGRAPHY</title> 
    <meta name="description" content="Karim V Tabar: photographer, new media, film, design." /> 
    </head> 

    <body style="width:100%;"> 

    <div id="wholewrapper" > 
    <!-- HEADER // TOP PORTION OF SITE --> 
    <div id="logoheader"> 
    <h5 class="logo"> 
    <a href="#" title="Go Back">KARIM VICTOR TABAR</a> 
    </h5> 
    </div> 

    <div class="wrapper"> 
    <div class="navcontainer"> 

    <?php 
    $count = 0; 
    foreach (new DirectoryIterator('images/menuImages') as $fileInfo) 
    { 
     if($fileInfo->isDot()) continue; 
     echo "<h2 class='acc_trigger' onclick=\"showDIV('subCat".$count."'); showContent(1, '".$fileInfo->getFilename() ."');\"><a href='#'>".$fileInfo->getFilename() ."</a></h2><div class='acc_container' id='container".$count."'><div class='block' name='subCats' id='subCat".$count."'><ul>"; 
     foreach (new DirectoryIterator('images/menuImages/'.$fileInfo) as $fileInfo2) 
     { 
      if($fileInfo2->isDot() || $fileInfo2 == "thumbnails") continue; 
      echo "<li><a href='#' onclick=\"showContent(2, '".$fileInfo->getFilename() ."/".$fileInfo2->getFilename()."');\">".$fileInfo2->getFilename() . "</a></li>"; 
     } 
     echo "</ul></div></div>";$count++; 
    } 
    ?> 
     <div id="navigationlinks"> 
     <ul> 
       <li><a href="pages/bio.html">BIO</a></li> 
       <li><a href="pages/contact.html">CONTACT</a></li> 
       <li><a href="http://blog.karimtabar.com/" target="_blank">BLOG</a></li></ul> 
     </div> 
    </div> 

    <!-- Images Thumbnails Categories --> 
    <div id="contentMain"> 


    <div id="slideshow"> 
     <img src="images/homepage/bb1.jpg" width = "750px" alt="" class="active" /> 
     <img src="images/homepage/et1.jpg" width = "750px" alt="" /> 
     <img src="images/homepage/gaga1.jpg" width = "750px" alt="" /> 
     <img src="images/homepage/gaga2.jpg" width = "750px" alt="" /> 
     <img src="images/homepage/hkartwalk.jpg" width = "750px" alt="" /> 
     <img src="images/homepage/homepagegirl.jpg" width = "750px" alt="" /> 
     <img src="images/homepage/rodeo2.jpg" width = "750px" alt="" /> 
     <img src="images/homepage/rodeo5.jpg" width = "750px" alt="" /> 
     <img src="images/homepage/silverwig_gaga.jpg" width = "750px" alt="" /> 
     <img src="images/homepage/wavy1.jpg" width = "750px" alt="" /> 
     <img src="images/homepage/Wenya.jpg" width = "750px" alt="" /> 
    </div> 

    </div> 

    </body> 
    </html>

這裏是PHP代碼，生成新的HTML（getMain.php）

<?php 

    $cmd=$_GET["cmd"]; 
    $id = $_GET["id"]; 
    /* The Thumbnail Display */ 
    if($cmd == 1) 
    { 
     echo "<div id='thumbnailcontentplaceholder'>"; 
     echo "<div id='thumbnailcontent'>"; 
     echo "<ul>"; 

     $dir = "images/menuImages/".$id."/thumbnails"; 
    // Open a known directory, and proceed to read its contents 
     if (is_dir($dir)) { 
      if ($dh = opendir($dir)) { 
       while (($file = readdir($dh)) != false) { 
        if(is_dir($file)) continue; 
       echo "<li>"; 
       echo "<a href='#' title='".$file."'><img src='".$dir."/".$file."' alt='' /></a>"; 
       echo "<div id='thumnailtitle'>".substr($file, 0, strpos($file, "."))."</div>"; 
       echo "</li>"; 
       } 
      closedir($dh); 
      } 
     } 
     echo "</div></div>"; 
    } 

    if($cmd == 2) 
    { 
     $dir = "images/menuImages/".$id; 
     $count = 1; 
     $nFiles = countFiles($dir); 

     echo "<div id='imageplaceholder'> \n"; 

     /* No1 No2 No3 ... */ 
     echo "<div id='controller' class='hidden'>\n"; 
     for($i =1; $i < $nFiles; $i++) 
     { 
      echo "<span class='jFlowControl'>No ".$i."</span>\n"; 
     } 
     echo "</div>"; 

     echo "<div id='slides'>"; 
     if (is_dir($dir)) { 
      if ($dh = opendir($dir)) { 
       while (($file = readdir($dh)) != false) { 
        if(is_dir($file)) continue; 
        echo "<div><img src='".$dir."/".$file."'></div>\n"; 
       } 
      closedir($dh); 
      } 
     } 
     echo "</div>\n"; 
     echo '<div id="prevNext"> 
     <a id="prev_275997_0" class="jFlowPrev" href="#" onfocus="this.blur()">Previous</a>&nbsp; 
     <span class="slide_slash">/</span>&nbsp; 
     <a id="next_275997_0" class="jFlowNext" href="#" onfocus="this.blur()">Next image</a>&nbsp;</div>'; 

     echo '<div id="credits2"> 
     BEIJING BLUE<br> 
     Photographed by: Karim V Tabar<br></div></div>'; 


    } 

    function countFiles($dir) 
    { 
     $dh = opendir($dir); 
     while (false !== ($filename = readdir($dh))) { 
      $files[] = $filename; 
     } 

     if ($files) 
      $num_of_files = count($files) - 2; // we substract 2 because . and .. are included 
     else 
      die('there is an error'); 

     return $num_of_files; 
    } 

    ?>

感謝

是用來工作真正HTML像這樣

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="../../js/jquery-1.2.6.pack.js" type="text/javascript"></script> 
    <script src="../../js/jquery.flow.1.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

    $(document).ready(function(){ 

    //Set default open/close settings 
    $('.acc_container').hide(); //Hide/close all containers 
    $('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container$(document).ready(function(){ 

    //On Click 
    $('.acc_trigger').click(function(){ 
     ('#open').click() 
    }); 

    }); 


    </script> 
    <script type="text/javascript"> 
     $(function() { 
      $("div#controller").jFlow({ 
       slides: "#slides", 
       width: "785px", 
       height: "480px" 
     }); 
    }); 
    </script> 

    <script type="text/javascript"> 

     var _gaq = _gaq || []; 
     _gaq.push(['_setAccount', 'UA-21909616-1']); 
     _gaq.push(['_setDomainName', '.karimtabar.com']); 
     _gaq.push(['_trackPageview']); 

     (function() { 
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
     })(); 

    </script> 





    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <link rel="stylesheet" type"text/css" href="../../css/stylesheet.css"> 
    <link rel="shortcut icon" href="../../logo/icon.jpg"> 
    <title>KARIM V TABAR PHOTOGRAPHY</title> 
    <meta name="description" content="Karim V Tabar: photographer, new media, film, design." /> 
    </head> 
    <body style="width:100%;"> 

    <div id="wholewrapper"> 

    <!-- HEADER // TOP PORTION OF SITE --> 
    <div id="logoheader"> 
    <h5 class="logo"> 
    <a href="../../index.html" title="Go Back">KARIM VICTOR TABAR</a> 
    </h5> 
    </div> 
    <div class="wrapper"> 
    <div class="navcontainer"> 

    <h2 class="acc_trigger"><a href="../editorial.html">EDITORIAL</a></h2> 

     <div class="acc_container"> 
      <div class="block"> <ul>    <li><a href="beijingblue.html">BEIJING BLUE</a></li> 
        <li><a href="gaga.html">GAGA</a></li> 
        <li><a href="dtrouble.html">DOUBLE TROUBLE</a></li> 
        <li><a href="et.html">EXTRATERRESTRIAL DREAMS</a></li> 
        <li><a href="liferush.html">LIFE RUSH</a></li> 
        <li><a href="rodeoglam.html">RODEO GLAM</a></li> 
        <li><a href="wanderlust.html">WANDERLUST</a></li> 
        <li><a href="runawayangel.html">RUN AWAY ANGEL</a></li> 
        <li><a href="russianstandard.html">RUSSIAN STANDARD</a></li> 
        <li><a href="hollywoodhills.html">HOLLYWOOD HILLS</a></li></ul> 

      </div> 
     </div> <h2 class="acc_trigger"><a href="../travel.html">TRAVEL</a></h2> 
     <div class="acc_container"> 
      <div class="block"> 
       <ul> 
        <li><a href="../t/hk.html">HONG KONG</a></li> </li> 
        <li><a href="../t/dubai.html">DUBAI, UAE</a></li> 
        <li><a href="../t/kyoto.html">KYOTO, JAPAN</a></li> 
        <li><a href="../t/miami.html">MIAMI, USA</a></li> 
        <li><a href="../t/la.html">L.A., USA</a></li></ul> 

      </div> 
     </div> 
     <h2 class="acc_trigger"><a href="../art.html">ART</a></h2> 
     <div class="acc_container"> 
       <div class="block"> 
       <ul>  <li><a href="../a/mirrorangel.html">MIRROR ANGEL</a></li> 
        <li><a href="../a/rouge.html">ROUGE</a></li> 
        <li><a href="../a/violet.html">VIOLET</a></li> 
        <li><a href="../a/noire.html">NOIRE</a></li></ul> 

      </div> 
     </div> <h2 class="acc_trigger"><a href="../video.html">VIDEO</a></h2> 
     <div class="acc_container"> 
      <div class="block"> 
       <ul> 
        <li><a href="../v/zigmat.html">ZIGMAT - BETWEEN BULLETS VIDEO</a></li><li><a href="../v/zigmat-1.html">ZIGMAT - BEHIND THE SCNES</a></li></ul> 
      </div> 
     </div>  
     <h2 class="acc_trigger"><a href="../exhibitions.html">EXHIBITIONS</a></h2> 
     <div class="acc_container"> 
      <div class="block"> 
       <ul> 
        <li><a href="../e/intemporelle.html">2009 RESIDENT, MONTRÉAL, CANADA</a></li><li><a href="../e/hkartwalk.html">2011 ART WALK, HONG KONG, CHINA</a></li> 
        </ul> 
      </div> 
     </div><!--  <h2 class="acc_trigger"><a href="#">PRESS</a></h2> 
     <div class="acc_container"> 
      <div class="block"> 
       <ul> 
        <li><a href="press1.html">NME</a></li> 
        <li><a href="press2.html">LIVE FAST MAG</a></li> 
        <li><a href="press3.html">GURU</a></li></ul> 
      </div> 
     </div> 
    --><div id="navigationlinks"> 
     <ul> 
       <li><a href="../bio.html">BIO</a></li> 
       <li><a href="../contact.html">CONTACT</a></li> 
       <li><a href="http://blog.karimtabar.com/" target="_blank">BLOG</a></li></ul> 
     </div> <!-- <div id="buyherelogo"> 
     <a href="../../store.html"><img src="../../store/buyhere.png" width="150" border="0"></a> 
     </div> 
    --></div> 
    <!--IMAGE // RIGHT PORTION --> 

    <div id="imageplaceholder"> 


    <div id="controller" class="hidden"> 
     <span class="jFlowControl">No 1</span> 
     <span class="jFlowControl">No 2</span> 
     <span class="jFlowControl">No 3</span> 
     <span class="jFlowControl">No 4</span> 
     <span class="jFlowControl">No 5</span> 
     <span class="jFlowControl">No 6</span> 
     <span class="jFlowControl">No 7</span> 


    </div> 

    <div id="slides"> 
     <div><img src="../../images/fashion/beijingblue/bb1.jpg" width="785" height="480"></div> 
     <div><img src="../../images/fashion/beijingblue/bb2.jpg" width="785" height="480"></div>  
     <div><img src="../../images/fashion/beijingblue/bb3.jpg" width="785" height="480"></div> 
     <div><img src="../../images/fashion/beijingblue/bb4.jpg" width="785" height="480"></div> 
     <div><img src="../../images/fashion/beijingblue/bb5.jpg" width="785" height="480"></div>  
     <div><img src="../../images/fashion/beijingblue/bb6.jpg" width="785" height="480"></div> 
     <div><img src="../../images/fashion/beijingblue/bb7.jpg" width="785" height="480"></div>   
    </div> 

    <div id="prevNext"> 
     <a id="prev_275997_0" class="jFlowPrev" href="#" onfocus="this.blur()">Previous</a>&nbsp; 
     <span class="slide_slash">/</span>&nbsp; 
     <a id="next_275997_0" class="jFlowNext" href="#" onfocus="this.blur()">Next image</a>&nbsp; 

    </div> 

    <div id="credits2"> 
     BEIJING BLUE<br> 
     Photographed by: Karim V Tabar<br> 


    </div> 

    </div> 



    </div> 


    </div> 

    </body> 
    </html>

來源

2011-08-05 guyPW123

當您綁定事件或調用jQuery函數時，元素需要存在於DOM中供jQuery查找。

因爲你腳本已被執行之後填充你的頁面，沒有元素的被選中（儘管將選擇在document.ready回調。

如果您在$('div#controller')做了console.log你會看到一個空jQuery對象。

如果相反，使用完整的回調註冊您的通話jsFlow，你應該看到的東西按預期工作。

有沒有你不使用的理由jQuery的規範化ajax函數？

來源

2011-08-05 15:39:12 zzzzBov

本網站在所有html（大約40頁）中都提供給我，我需要將其重新制作。這是所有html http://www.karimtabar.com/網站所以我想要做的是在您選擇一個類別並查看相冊後，具有幻燈片效果的圖像查看器。你建議我做什麼？ – guyPW123

guyPW123,

需要首先顯示

您在代碼中使用<div id="contentMain">，但您在div#controller上調用它？無論如何，即使你指定了正確的選擇器，它也不會工作，因爲正如zzzzBov回答的那樣，當頁面加載時，你的div是空的。您必須在更新內容後調用jFlow功能：

if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
    document.getElementById("contentMain").innerHTML=xmlhttp.responseText; 

    $("div#contentMain").jFlow({ 
     slides: "#slides", 
     width: "785px", 
     height: "480px" 
    }); 
}

來源

2011-08-05 16:07:42

div控制器在php中。多數民衆贊成它以前用它來控制它。我嘗試了你剛發給我的Nemanja不工作 – guyPW123

我改變了問題的內容，我把所有的代碼放在那裏。可以幫助更多我認爲。我真的陷入了困境，這幾乎是我必須完成的最後一件事情 – guyPW123

相關問題

1. 呼叫與PHP
2. 詹REST API繼續呼叫後返回重新加載頁面重新加載
3. 呼叫vaadin申請表PHP與jQuery
4. PHP/jQuery重新加載DOM
5. PHP OOP多重呼叫
6. 呼叫控制器和重新加載部分
7. Ajax呼叫等待加載
8. 呼叫與瓦爾PHP
9. 呼叫在PHP
10. 重新加載？ jquery .live/.load後的Javascript

11. 自動重新加載'php'在javascript
12. PHP/Javascript/Python不能重新加載div
13. 使用javascript重新加載php頁面
14. JQuery的呼叫負載方法
15. JavaScript攔截呼叫
16. javascript呼叫信息
17. JavaScript/Jquery呼叫控制器synchroneousely
18. Twilio Javascript客戶端新呼叫SID
19. PHP呼叫重寫子類功能
20. 肥皂呼叫中PHP重複元素
21. 呼叫重定向PHP函數
22. AJAX重複呼叫
23. Datepicker停止重新加載/傳呼
24. 呼叫使用jQuery
25. jQuery同步呼叫
26. 呼叫的jQuery $就
27. 呼叫FO從PHP
28. 呼叫數組PHP
29. 呼叫與json_encode參數的JavaScript函數
30. 呼叫javascript函數與不定值