 jQuery + Ajax Po wczytaniu zawartości skrypty nie uruchamiają się, Pomimo wielu prób i poświęconego czasu. Niestety potrzebuję pomocy. |
  |
| jQuery + Ajax Po wczytaniu zawartości skrypty nie uruchamiają się, Pomimo wielu prób i poświęconego czasu. Niestety potrzebuję pomocy. |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 2 Pomógł: 0 Dołączył: 1.10.2012 Ostrzeżenie: (0%) 
 |
Próbuję zrobić na stronie trzy guziki z czego każdy wymienia fragment strony w tym same guziki (ajax)
$.ajax({url:"y.php",success:function(result){ $("#content").html(result); $('#mycarousel').jcarousel(); $("#naglowek_1").fadeIn(1500); }}); Po naciśnięciu powinien przeładować się ten fragment strony i powinny uruchić się te funkcje i OK problem polega na tym że działa to tylko raz i trzeba odświeżyć stronę bo funkcja uruchamia się $(doument).ready(function(){}); Próbowałem zrobić trzy takie bloki co pewnie nie jest dobrą praktyką ale żaden z nich nie działa... $(document).ready(function(){ $(#btn_1).delegate(function(){ $("#button_1").click(function(){ $.ajax({url:"1.php",success:function(result){ $("#content").html(result); $('#mycarousel').jcarousel(); $("#naglowek_1").fadeIn(1500); }}); }); }); }); Zanlazłem w necie przykład delegowania nasłuchów przez jQ ale nie panuję nad tym (delegate i parametry do switcha skąd e  ?)$(document).ready(function(){ $(?div.grid_4?).delegate(?a?, ?click?, menuHandler); //delegowanie nasluchu }); function menuHandler(e) { var Btn_Id = e.target.id; //id kliknietego przycisku switch (Btn_Id) { case ?button_1? : $.ajax({url:"1.php",success:function(result){ $("#content").html(result); $('#mycarousel').jcarousel(); $("#naglowek_1").fadeIn(1500); }}); break; case ?button_2? : $.ajax({url:"2.php",success:function(result){ $("#content").html(result); $('#mycarousel').jcarousel(); $("#naglowek_1").fadeIn(1500); }}); break; case ?button_3? : $.ajax({url:"3.php",success:function(result){ $("#content").html(result); $('#mycarousel').jcarousel(); $("#naglowek_1").fadeIn(1500); }}); break; default: alert(?Nie zaimplementowano obsługi tego przycisku!!?); } } Tak wygląda index.php a puki co treści wymieniane przez ajax (div id="content') różnią sie tylko kolejnośiami zdjęć <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="pl"> <head> <title>aaa</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="" /> <meta name="description" content=""/> <meta name="keywords" content=""/> <meta name="robots" content="all" /> <meta name="revisit-after" content="7 Days" /> <link rel="shortcut icon" href="img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/960.css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" /> <link rel="stylesheet" type="text/css" href="css/skin.css" media="screen" /> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/jquery.jcarousel.min.js"></script> <script type="text/javascript" src="js/mintAjax.js"></script> <script type="text/javascript" src="js/main.js"></script> </head> <body> <img id="linia" src="images/linia.jpg" width="100%"> <div class="container_12"> <div class="grid_12"> <a id="logo" href="index.php"><img src="images/logo_white.jpg"></a> </div> <div id="content"> <!-- content --> <div id ="btn_1"class="grid_4"> <a id="button_1" class="block-title" style="border: 2px solid black;">Serwisy</a> </div> <div id="btn_2" class="grid_4"> <a id="button_2" class="block-title"> Strony </a> </div> <div id="btn_3" class="grid_4"> <a id="button_3" class="block-title">Wizytówki</a> </div> <div class="grid_12"> <p id="naglowek_1" class="block-text" style="display:none;background-color:white; color:blue;"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer </p> </div> <div class="grid_12" style="margin-top:20px;"> <div id="wrap"> <ul id="mycarousel" class="jcarousel-skin-tango"> <li><img src="images/bbb.jpg" /></li> <li><img src="images/ccc.jpg" /></li> <li><img src="images/fff.jpg" /></li> <li><img src="images/bbb.jpg" /></li> <li><img src="images/ccc.jpg" /></li> <li><img src="images/fff.jpg" /></li> <li><img src="images/bbb.jpg" /></li> <li><img src="images/ccc.jpg" /></li> <li><img src="images/fff.jpg" /></li> </ul> </div> </div> <div class="grid_12"> <p class="block-text" style="color:blue;"> Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer </p> <div> </div><!-- end content --> </div> </body> </html> Jeśli znalazła by sie jakaś zdolna dusza z chwilką wolnego czasu t obył bym wdzięczny. Ten post edytował adam_gdansk 1.10.2012, 14:49:10 |
 |
 
|
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 6 380 Pomógł: 1116 Dołączył: 30.08.2006 Ostrzeżenie: (0%)
|
Zobacz http://api.jquery.com/on/ i czytaj rozdział Direct and delegated events
-------------------- |
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 179 Pomógł: 2 Dołączył: 17.11.2005 Ostrzeżenie: (0%)
|
no tak, mam ten sam problem, i aby działało to to w każdym pliku trzeba jakby na nowo podać jquery aby zaczęło przetwarzać skrypt, innej metody nie znam..
znalazłem jeszcze coś takiego: link rozwiązało mój problem, może i Tobie pomoże 
Ten post edytował stroju 1.10.2012, 21:32:45 |
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 2 Pomógł: 0 Dołączył: 1.10.2012 Ostrzeżenie: (0%)
|
Wykręciłem się ogonem i zrobiłem ukrywając i pokazując bloki kodu html też jQ pewnie to nie optymalne ale wygląda identycznie
Dzięki wszystkim za pomoc
|
|
|
|
|
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 6 380 Pomógł: 1116 Dołączył: 30.08.2006 Ostrzeżenie: (0%)
|
W pewnym sensie problem rozwiązałeś ale nie zrozumiałeś zagadnienia a to jest niestety jedna z podstaw JS którą trzeba zrozumieć (w tym wypadku bubbling i delegacja zdarzeń). Kod nie działał ponieważ dodawałeś nowy do drzewa DOM już po document.ready. Kiedyś to było robione w jquery za pomocą $.live(), obecnie wszystko obsługuje $.on(). W sieci jest ogromna ilość artykułów na ten temat i naprawdę polecam zapoznanie z nimi.
-------------------- |
|
|
|
|
|
Aktualny czas: 19.08.2025 - 16:13 |
