problem z funkcjami po dynamicznym załadowaniu treści

0

Witam. Mam następujący problem. Ładuje do contenta dynamicznie treść po kliknięciu w link . Pokażę , może kod

		$('#menu_tabs li a').click(function(){
		
			var toLoad = $(this).attr('href');
			$('#menu_tabs li a').removeClass('current');
			$(this).addClass('current');
			$('#content').hide('fast',loadContent);

			$('#page').append('<span id="load">ladowanie</span>');
			$('#load').fadeIn('normal');

			function loadContent() {
				$('#content').text('');
				$('#content').load(toLoad,'',showNewContent());
			}
			function showNewContent() {
				$('#content').show('fast',hideLoader());
			}
			function hideLoader() {
				$('#load').fadeOut('normal');
			}
			

			
			return false;


		});

po tym zabiegu gdy np. załaduje do #content jakąś podstronę na której wykorzystuje jquery , to już nie działają skrypty na tej podstronie. Pewnie dlatego , że jquery podczas wywoływania go gdy nie znajduje elementu np.

$('#czysc').click(function() {
	alert('test');
});

Da się może to jakoś obejść ?? Proszę o pomoc.

0
Łukasz napisał(a)

Pewnie dlatego , że jquery podczas wywoływania go gdy nie znajduje elementu np.

$('#czysc').click(function() {
	alert('test');
});

Da się może to jakoś obejść ?? Proszę o pomoc.

Hmmm, to zdanie chyba nie po polsku jest ;)
Jezeli zaladujesz ajaxowa jakas tresc przy pomocy metody load() to kod JS znajdujacy sie w ladowanej stronie powinien sie wykonac. Moze pokaz jescze fragment tej strony, ktora ladujesz.

Dodatkowo, w przypadku dynamicznie zmieniajacej sie zawartosci, moga Ci sie przydac metody load() oraz delegate(). Metoda live() dba o to, aby dane zdarzenia byly bindowane w przypadku gdy dana tresc zmienia sie w sposob dynamiczny.

0
Adam Boduch napisał(a)

Hmmm, to zdanie chyba nie po polsku jest ;)

No tak z polskim ono nie ma za dużo wspólnego , ale dobrze , że zrozumiałeś.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

		<link type="text/css" href="css/cupertino/jquery-ui-1.8.9.custom.css" rel="stylesheet" />	
		<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>style/style_dev.css" />
		<title>Ustawienia</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
		<script src="<?php echo base_url();?>js/script_dev.js" type="text/javascript"></script>
		<script type="text/javascript" src="<?php echo base_url();?>js/jquery-ui-1.8.9.custom.min.js"></script>
	</head>
	<body>
		<div id="page">
			<div id="menu_tabs" class="ro">
							<ul>
								<li><?php echo anchor('vote/month/view_vote','Głosowanie','class="current"');?></li>
								<li><?php echo anchor('vote/month/results','Wyniki');?></li>

							</ul>
			
			</div>		
			<div id="content" >
		
			</div>
			
			<div id="footer" class="ro clearfix">
				<div id="footer_left">
					<p>
						...
					</p>
				</div>
				
				<div id="footer_right">
					<p>
						<strong>Info:</strong>
							<a href="">Pomoc</a> | <a href="">Zasady</a>
					</p>
					
					<p>
						<strong>Zgłoszenia:</strong>
							<a href="">Zgłoś pomysł</a> | <a href="">Zgłoś błąd</a> | <a href="">Kontakt</a>
					</p>
				</div>
			</div>
		
		</div>
	
	</body>
	</html>

oto kod strony głównej. Starałem się usunąć nie potrzebne rzeczy aby tutaj nie zajmować miejsca i nie nudzić forumowiczów.

					<fieldset class="ro" id="lista"><legend>Wybierz zawodników</legend>
						<ul id="zawodnicy">
							<li id="zawodnik_1" class="no">Zawodnik 1</li>
							<li id="zawodnik_2" class="no">Zawodnik 2</li>
						</ul>
					</fieldset>
				

				
					<div id="boisko">
						<div class="footballer ui-draggable" style="position: relative; left: 155px; top: 428px; display: block;">
							<div class="player"> </div>
							<div class="data ro">Stoper</div>

                
						</div>						
						
						<div class="footballer ui-draggable" style="position: relative; left: 33px; top: 405px; display: block;">
							<div class="player"> </div>
							<div class="data ro">Lewy Obrońca</div>
                
						</div>
						
						<div class="footballer ui-draggable" style="position: relative; left: 150px; top: 529px; display: block;">
							<div class="goalkeeper"> </div>

							<div class="data ro">Bramkarz</div>

						</div>



						
					</div>

Oto kod ładowanej strony ( usunąłem pozycje itp bo to ma być przykład ).


$(document).ready(function() {

		
		
		$("#zawodnicy > .no" ).draggable({ revert: "invalid" ,helper: 'clone',cursor:'move'});



		$( ".data" ).droppable({
			accept: "#zawodnicy > .no",

			tolerance:'touch',
			drop: function( event, ui ) {

					var text = $(ui.draggable[0]).text();	
					if ( $(this).text() == text )
						{
							alert('taki juz jest uzyty');
						}
						else
						{
							$(this).text(text);
							$(ui.draggable[0]).removeClass('no');	
							$(ui.draggable[0]).addClass('yes');	

						}


				}
		});
		
		$('#czysc').click(function() {
			$('.data').text('');
			$('#zawodnicy > .yes').removeClass('yes');
			$('#zawodnicy > li').addClass('no');
		});
		
	
		
		$('#menu_tabs li a').click(function(){
		
			var toLoad = $(this).attr('href');
			$('#menu_tabs li a').removeClass('current');
			$(this).addClass('current');
			$('#content').hide('fast',loadContent);
			$('#load').remove();
			$('#page').append('<span id="load">Ladowanie...</span>');
			$('#load').fadeIn('normal');

			function loadContent() {
				$('#content').text('');
				$('#content').load(toLoad,'',showNewContent());
			}
			function showNewContent() {
				$('#content').show('fast',hideLoader());
			}
			function hideLoader() {
				$('#load').fadeOut('normal');
			}

			
			return false;


		});



});

a tutaj całość kodu odpowiedzialna za manipulacje elementami na ładowanej stronie. Znaczy to wiadomo początek :) Tylko nie działa mi to i dlatego pytam.

0

#content to div.
Czy strona ładowana zawiera tagi html, head, body etc. czyli jest to poprawna strona html? czy tylko część kodu html, np. głównym elemenetem jest jakiś div?
Jeśli jest to pełna strona html to wg mnie rozwala to cały dom tej strony i to może powodować błędy js, czyli jQuery się gubi.

0

Zamieściłem pełen kod , który jest używany.

0

Mógłby ktoś jeszcze odpowiedzieć ? Bo naprawdę jest mi to potrzebne i nie wiem dlaczego nie działa. Lub jak to przerobić.

1 użytkowników online, w tym zalogowanych: 0, gości: 1