[AJAX, jQuery] Problem z wywołaniem JS z załadowanej przez AJAX treści Opcje

[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).

Ten post edytował gebp 25.04.2009, 17:53:51

[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

Ten post edytował trol 25.04.2009, 18:45:50

[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

[HTML] pobierz, plaintext 
function link(div,plik) {
 $.post(plik, function(response){
	$("#"+div).html(response);
	 });
}
[HTML] pobierz, plaintext 

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:

[HTML] pobierz, plaintext 
$('element').click(function(){alert('cos');});
[HTML] pobierz, plaintext 

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 :

[HTML] pobierz, plaintext 
<script>
    function buildLink(element, search, func)
    {
        $(element).find(search).each(function(i){
            $(this).click(function(){ func({id: $(this).attr('id')}); return false;});
        });
    }
 
    // wywołanie po utworzeniu elementu
    buildLink('#element', '.jakas-klasa', funkcja-którą-odpala-link);
</script>
[HTML] pobierz, plaintext 

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ą

Edit:

Można i tak : [b]LIVE

Ten post edytował nithajasz 11.05.2009, 11:12:33