Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX, jQuery] Problem z wywołaniem JS z załadowanej przez AJAX treści
Forum PHP.pl > Forum > XML, AJAX
trol
Witam,
od już kilkunastu prawie godzin walczę z czymś, mam na dzieję banalnym i nie mogę za sobie z tym poradzić. Otóż:

Mam stronę HTML:
[...]
<ul>
<li> tresc pierwotna, która potrafi wywołać funkcję </li>
<li> inna tresc pierwotna, która potrafi wywołać funkcję </li>
</ul>
<a href='#'>Wywołuje AJAX</a>
[...]
Mój kod jQuery obsługuje kliknięcie na zawartość każdego taga <li></li> i to działa bez zarzutu (wywołuje inną fukncję jQuery, która coś tam sobie robi). Natomiast jeżeli wywołam działanie AJAX`a poprzez kliknięcie na link "Wywołuję AJAX", które usuwa dotychczasowe tagi <li></li> wewnątrz tagu <ul> </ul> i wprowadza tam nowe tagi <li></li> np. <li> zawartość zwrócona przez AJAX</li> to te nowe tagi zdają się być "odporne" na moje klikania - nie chcą wcale współpracować z kodem jQuery.

// Moje kombinowania //
wstawiłem do index kod js

function triggerRightMenu()
{
alert('test');
}

a wstawiane przez ajaxa tagi wzbogaciłem o coś takiego <li><a href='#' onclick='triggerRightMenu()'> tresc AJAX`owa</a> </li>. Niestety alert się nie wywołuje...
Natomiast w sytuacji kiedy AJAX zwraca <li><a href='#' onclick='alert('test');'> teraz tutaj alert działa </a> </li>. Nie trudno się wobec tego skapnąć, że załadowana treść AJAXA "nie widzi" kodu z pozostałej strony. Schematycznie ujmując

| cała strona
|
| kod jQuery (...) - 1
|
| |załadowana treść Ajax
| |
| | tutaj kod z 1 nie obsługuje tagów
|

Mam nadzieję, że czytelnie wyraziłem mój problem. Gorąco proszę o pomoc.
gebp
Nie mam pojęcia co źle robisz. Bez kodu nie da rady.
Sam sprawdzałem i jQuery bez problemu realizuje kod javascript pobrany w odpowiedzi. Pokaż kod. Może zapytanie AJAX coś źle robisz ale to są tylko moje domysły.
Jak pisałem wcześniej javascript tak samo "$.ajax" jak i "$.post" bez problemu się wykonuje (przynajmniej w wersji 1.3.2).
trol
cały kod jQuery:
(function($) {
$(function() {
$('#content').fadeIn(400);

/*
* Left menu all action
*/
$('#leftMenu h1').click(function() {
$('#leftMenu ul').slideToggle(150);
});

$('#leftMenu a').click(function(){
var leftMenuIndex = $(this).attr('tabindex');
$('#leftMenu ul').fadeOut(150);
var newValue = $(this).text();
$('#leftMenu h1').text(newValue);
$('#rightMenu h1').text('--- SELECT ---');
//$('#contentBox').fadeOut(300);
$('#rightMenu ul').fadeOut(300, function() {
$('#rightMenu a').remove();
$('#rightMenu li').remove();
$.ajax({
type: 'get',
url: 'fragment.php',
data: 'leftMenuIndex='+ leftMenuIndex,
success: function(returnValue) {
$(returnValue).appendTo('#rightMenu ul').fadeIn(300);
}
}); // end ajax
});
}); // end of #feftMenu a click


/*
* Right menu all action
*/
function triggerRightMenu()
{
alert('test');
}

$('#rightMenu h1').click(function() {
$('#rightMenu ul').slideToggle(150);
});

$('#rightMenu a').click(function() {
var rightMenuIndex = $(this).attr('tabindex');
$('#rightMenu ul').fadeOut(150);
var newValue = $(this).text();
$('#rightMenu h1').text(newValue);
$('#conBox').fadeIn(300);
$('#content').fadeOut(300, function() {
$(this).remove();
$.ajax({
type: 'get',
url: 'fragment.php',
data: 'rightMenuIndex='+ rightMenuIndex,
success: function(returnValue) {
$('<div id = "content">' + returnValue + '</div>').appendTo('#contentBox').fadeIn(300);
}
}); // end ajax
});
}); // end of #rightMenu a click



});
})(jQuery);


generowanie odpowiedzi z pliku fragment.php
(działam z biblioteką Smarty, więc wklejam szablon). -- tutaj myślę, że jest ok, - sprawdzam odpowiedź w firebug`u i wygląda dobrze.
{foreach from=$pagesInfo key='index' item 'pageInfo}|
<li><a href='#' tabindex='{pageInfo.id}'>{$pageInfo.title}</a></li>
{/foreach}

strona główna
mam problemy z ładnym wyświetleniem html`a więc tutaj jest treść strony głównej
gebp
Nie zagłębiałem się bardziej w Twój kod ale, ie jestem pewien jak zachowuje się apendTo() ( dopiero zaczynam z tą biblioteką wcześniej korzystałem z innej) ale ja korzystam z html() (ten na pewno realizuje js w odpowiedzi ). Wiem że apendTo() "dokleja" odpowiedź w skazanym miejscu a html() podmienia zawartość.
Wygląda to mniej więcej tak u mnie
  1. function link(div,plik) {
  2. $.post(plik, function(response){
  3. $("#"+div).html(response);
  4. });
  5. }

Spróbuj może tak.
nithajasz
Znam ten problem.. Miałem to samo ale wykombinowałem to trochę inaczej, a wręcz banalnie.

Tą swoją funkcje z alertem daj poza definicją jquery, tzn. bezpośrednio po <script> i dopiero po zamknięciu klamry tej funkcji deklaruj sobie co tam chcesz co ma być w $(document).ready. Oczywiście zdarzenia na elemencie onClick musisz dodać.

Nie wiem dlaczego nie łapie wcześniej zadeklarowanego kodu typu:

  1. $('element').click(function(){alert('cos');});


Co prawda i przy tym pokombinowałem troche i jak tworzyłem klikalne elementy ajaxem, to od razu tworzyłem do tego coś ala obsługę takiego linka. Nie mam kodu pod ręką ale wyglądało to mniej więcej tak :

  1. function buildLink(element, search, func)
  2. {
  3. $(element).find(search).each(function(i){
  4. $(this).click(function(){ func({id: $(this).attr('id')}); return false;});
  5. });
  6. }
  7.  
  8. // wywołanie po utworzeniu elementu
  9. buildLink('#element', '.jakas-klasa', funkcja-którą-odpala-link);


To już działa normalnie tak jak utworzone przy ładowaniu całej strony elementy. A dlaczego tak się dzieje to nie mam pojęcia. Jak dojdziesz czemu tak się dzieje możesz się podzielić wiedzą winksmiley.jpg

Edit:

Można i tak : [b]LIVE
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.