Перезагрузка Javascript после вызова Jquery с Php

У меня проблема, которую я пытался решить в последние дни. У меня есть JQuery, который обновляет HTML и создает новое содержимое внутри тега div. Дело в том, что javascript не применяется к сгенерированному коду. Другими словами, я мог бы получить точный результат, который дает мне Php, поместить его в html-код напрямую, и он работает, но если он исходит из php во время работы страницы, это не сработает, оно не отображается изображения правильно в слайд-шоу jflow.

Вот заголовок 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">LA, 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>

Когда вы связываете события или вызываете jQuery-функции, этот элемент должен существовать в DOM для jQuery, чтобы найти его.

Поскольку вы заполняете свою страницу после выполнения сценария, элемент не должен быть выбран (несмотря на то, что вы выбрали его в обратном вызове document.ready .

Если вы сделали console.log на $('div#controller') вы увидите пустой объект jQuery.

Если вы вместо этого использовали полный обратный вызов для регистрации вашего вызова jsFlow , вы должны видеть, что все работает как ожидалось.

Есть ли причина, по которой вы не используете нормализованные функции ajax для jQuery?

Вы используете <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" }); }