mam dwa takie pliki
test.php
CODE
<html>
<head>
<script src="./js/mootools.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var opcje = $$("div.item");
var obiekt = {};
var efekt = new Fx.Elements(opcje, {wait: false, transition: Fx.Transitions.Back.easeOut});
opcje.each(function(opcja, i){
opcja.addEvent("mouseenter", function(){
opcje.each(function(x,j){
if (i == j) obiekt[j] = {width: 125, height:125, 'background-color': '#89c577'};
});
efekt.start(obiekt);
});
opcja.addEvent("mouseleave", function(){
opcje.each(function(x,j){
if (i == j) obiekt[j] = {width: 120, height:120, 'background-color': '#FFFFFF'};
});
efekt.start(obiekt);
});
});
$('start').addEvent('click', function(e) {
e = new Event(e).stop();
var url = "test2.php";
new Ajax(url, {
method: 'get',
update: $('log')
}).request();
});
});
</script>
</head>
<body>
<a id="start" href="#">Kliknij aby przetestowac</a>
<div id="log"></div>
<div class="item">test</div>
</body>
</html>
<head>
<script src="./js/mootools.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var opcje = $$("div.item");
var obiekt = {};
var efekt = new Fx.Elements(opcje, {wait: false, transition: Fx.Transitions.Back.easeOut});
opcje.each(function(opcja, i){
opcja.addEvent("mouseenter", function(){
opcje.each(function(x,j){
if (i == j) obiekt[j] = {width: 125, height:125, 'background-color': '#89c577'};
});
efekt.start(obiekt);
});
opcja.addEvent("mouseleave", function(){
opcje.each(function(x,j){
if (i == j) obiekt[j] = {width: 120, height:120, 'background-color': '#FFFFFF'};
});
efekt.start(obiekt);
});
});
$('start').addEvent('click', function(e) {
e = new Event(e).stop();
var url = "test2.php";
new Ajax(url, {
method: 'get',
update: $('log')
}).request();
});
});
</script>
</head>
<body>
<a id="start" href="#">Kliknij aby przetestowac</a>
<div id="log"></div>
<div class="item">test</div>
</body>
</html>
oraz test2.php
CODE
<html>
<body>
<div class="item">test2</div>
</body>
</html>
<body>
<div class="item">test2</div>
</body>
</html>
Jak widać na class "item" nałożony jest event zmiany rozmiaru, koloru, po najechaniu myszką itp, ale mniejsza o to.
Problemem jest to, że po wczytaniu pliku test2.php (kliknieciu na "Kliknij aby przetestowac"), pomimo iż jest tam div i ma on tą samą klasę ("item) nie łapie tego efektu.
Pytanie jest jak to zrobić aby po wczytaniu danych poprzez metode "Ajax" (do wczytywania do div'a danych z pliku php) obiekty będące wynikiem (w tym przypadku bedzie to <div class="item">test2</div>) korzystały z eventu do zmiany, rozmiaru i koloru.
Słowami laika - chce żeby po kliknieciu "Kliknij aby przetestowac" to co sie załaduje zachowywało się tak jak div poniżej
