Forum PHP.pl > Wykonanie JS na elementach pobranych z AJAXA

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Wykonanie JS na elementach pobranych z AJAXA

reyne

30.08.2013, 08:27:07

Witam, przypuśćmy mam plik ladowarka.php, w którym mam kod JavaScript i ładuję sobie nim zawartość (dla przykładu blok <div id="tekst">jakis tekst</div>) do diva z pliku dane.php (za pomocą JQUERY).
Jak operować teraz na załadowanym bloku? Bo kod JS, który mam w pliku ladowarka.php, jakby nie widzi tego elementu pobranego dynamicznie, jednym z rozwiązań jest umieszczenie tego kodu też w pliku dane.php, wtedy wszystko działa.
Pytanie: czy trzeba zawsze dołączać kod JS do pliku pobieranego ajaxem?

nospor

30.08.2013, 08:28:48

MOze uraczylbys nas kodem jaki masz bysmy wiedzieli o czym konkretnie mowisz.

markonix

30.08.2013, 09:29:53

http://api.jquery.com/on/ (wcześniej live)

nospor

30.08.2013, 09:45:33

To zalezy co robi, dlatego prosilem o kod. Live (on) to jedno z kilku rozwiazan

celbarowicz

30.08.2013, 19:49:24

W ładowarce umieść : <script type="text/javascript" src="tutaj_wszystkie_funkcje.js"></script>.
U mnie takie coś działa na każdym wklejanym pliku.

reyne

1.09.2013, 10:32:14

kod jest zbyt skomplikowany i dużo plików musiałbym dołączać

, chodzi ogólnie o zasadę jak powinno się to robić, zwykle robię to właśnie tak, że dołączam bibliotekę jquery (wraz ze skryptem js) zarówno do "ladowarki" jak i pliku, który jest ładowany, wtedy nie ma problemu.. tylko czy np dołączanie kodu i w ładowarce i w pliku nie opóźnia działania strony?

markonix

1.09.2013, 10:35:45

No jest to bezsensu, zgadza się.

Spróbowałeś mojej metody?

reyne

1.09.2013, 11:45:10

No właśnie nie wiem zbytnio jak się za to zabrać, dlatego na potrzeby stworzyłem prosty skrypt, który pobiera button z pliku zewnętrznego ajaxem. Po kliknięciu buttona powinna wyświetlić się wiadomość. Wyświetla się dopiero jeżeli dołącze JS i JQUERY także do pliku pobieranego.

plik index.php

[PHP] pobierz, plaintext 
<?php
 
echo '
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Ładowarka</title>
</head>
<body>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/laduj.js"></script>
 
<button id="zaladuj-plik">Załaduj plik</button>
 
<div id="content"></div>
 
</body>
</html>
';
?>
 
[PHP] pobierz, plaintext

plik laduj.js

[PHP] pobierz, plaintext 
$(document).ready(function() {
 
	$("#zaladuj-plik").click(function() {
		$.ajax({
			type: "GET",
			url: "dane.php",
			beforeSend: function(html){
				$("#content").html("Czekaj..");
			},
			success: function(data){
				$("#content").html(data);
			}
		});
	});
 
	$("#wyswietl-wiadomosc").click(function() {
		alert('wiadomosc');
	});
 
});
 
[PHP] pobierz, plaintext

plik dane.php

[PHP] pobierz, plaintext 
<?php
 
/* Jeśli dodam te pliki, skrypt działa
echo '
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/laduj.js"></script>
';
*/
 
echo '
roznorodne dane ;)
<button id="wyswietl-wiadomosc">Wyświetl wiadomość</button>
';
?>
[PHP] pobierz, plaintext

Jak się do tego .on() będzie mieć?

Ok działa

ROZWIĄZANIE:

zdarzenie

[PHP] pobierz, plaintext 
$("#wyswietl-wiadomosc").click(function() {
		alert('wiadomosc');
});
[PHP] pobierz, plaintext

trzeba zmienić na

[PHP] pobierz, plaintext 
$('#content').on('click', '#wyswietl-wiadomosc', function (){
        alert('wiadomosc');
});
[PHP] pobierz, plaintext

Dzięki za podpowiedź

markonix

1.09.2013, 11:46:26

No dobrze, ale ja tu nigdzie nie widzę zastosowanego on.
Domyślnie jQuery działa na załadowanym DOM w momencie otwarcia strony, powyższe zmienia to zachowanie działając także na dynamicznie dodanych danych.

http://stackoverflow.com/questions/1359018...c-html-elements

reyne

1.09.2013, 11:50:06

Akurat się minęliśmy z odpowiedzią .on() załatwia sprawę

powyżej zamieściłem rozwiązanie, że też wcześniej tego nie używałem, za każdym razem dodawałem js w każdym pliku

Dzięki!

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.