[jQuery]Skrypty nie działają do treści ładowanych przez AJAX

Dla specjalistów Webmastering
#1

Witam.

Szukam rozwiązania mojego problemu już od dłuższego czasu, ale nie mogę go znaleźć. Przedstawię problem na przykładzie.

Mam trzy pliki: dwa html i jeden js

W pliku js znajduje się taki fragment

$('div').click(function(){

	$.post('dynamic.html', {}, function(ret){

		$('body').html(ret);

	});

});

plik index.html (sama sekcja body):

Tresc statyczna
[/code] plik dynamic.html (cały):

[code]
Dynamiczna treść

Kiedy kliknę na index.html w tego DIV’a to AJAX załaduje mi w jego miejsce DIV z pliku dynamic.html, ale kiedy kliknę w tego nowo załadowanego div’a to już nic się nie stanie, a chciałbym, aby plik js działał także dla tych dynamiczne wczytanych treści. Mógłbym go dodać w pliku dynamic.html za pomocą znacznika

To da się jakoś zrobić bo np. facebook, który doładowuje starsze posty w trakcie przewijania strony ma działające skrypty dla całości.

Pozdrawiam i z góry dziękuję za pomoc

IcyMat

#2

Żeby działać na treściach ładowanych dynamicznie skorzystaj z “.on();”.

#3

A mógłbyś mi to wyjaśnić na powyższym przykładzie?

Bo próbowałem używać .on(), ale nie mogę dojść do ładu z tym.

#4 
$("div").on("click", function(e){ .. });

Twoje podejście do ładowania treści jest jednak nieco dziwne, powiedz może co chcesz osiągnąć a wymyślimy jakiś optymalny sposób.

#5

Powyższe Ci nie działa, ponieważ zdarzenie ‘click’ dotyczy się początkowego DIV. Funkcją .html(ret) nadpisujesz całą jego zawartość, w tym i przypisane zdarzenie ‘click’ - ot i całe wyjaśnienie tego problemu.

Teraz możesz:

  1. po załadowaniu DIVa znów przypisać mu zdarzenie ‘click’;

  2. stworzyć dwa DIV’y - jeden zewnętrzny, do którego przypisujesz raz ‘click’, i drugi wewnętrzny, do którego wczytujesz zmienną treść.

EDIT: zauważyłem teraz, że Ty nową treść wczytujesz do całego body, czyli podmieniasz zawartość strony, więc pkt. 2 odpada w tym przypadku. Jeśli tak musisz mieć, to we wczytywanych stronach też musisz umieścić analogiczny kod JS jaki masz na stronie index.html

Tylko podmiana całej strony dokumentu w ten sposób jest moim zdaniem bez sensu - to już prościej linka zrobić do przeładowania strony (odpowiednio ostylowanego w CSS).

#6

Nie podmieniam całego body - chciałem tylko jak najbardziej uprościć przykład :wink:

Czyli nie da się robić tego tak, żeby umieścić kod w pliku i wczytać go tylko na początku w sekcji head? Muszę go po prostu dołożyć do pliku, który jest ładowany AJAXem, tak?

#7

Ten użyty identyfikator ‘body’ mnie zmylił - rzeczywiście nie musi to oznaczać document.body.

Możesz mieć tak jak masz, ale musisz zmodyfikować kod JS:

function init() {

$('div').click(function(){

   $.post('dynamic.html', {}, function(ret){

      $('body').html(ret);

      init();

   });

})};

$(document).ready(init);

Nie sprawdzałem, ale powinno działać poprawnie. Oczywiście przy założeniu, że elementy o id ‘div’ oraz ‘body’ będą występowały w dokumencie za każdym załadowaniem i podmianą kodu ‘body’.

#8

Wielkie dzięki. Dokładnie o coś takiego mi chodziło :slight_smile:

Rozwiązałeś mój odwieczny problem :stuck_out_tongue_winking_eye:

EDIT: A jednak nie - problem z niedziałającymi skryptami nadal występuje. Nie zauważyłem, że miałem dodane ponowne wczytanie pliku JS za każdym ładowaniem treści przez AJAX :frowning:

#9
#10

Wielkie dzięki :slight_smile:

Teraz wszystko działa tak jak powinno :slight_smile: