Witam,

Uczę się jQuery i stwierdziłem, że zrobię prostą galerię jako moduł do Joomli. Założenie - jeden obrazek, na dole miniaturki i po naciśnięciu zmieniają główny. Nie wiem, co robię źle, ale jQuery zamiast zadziałać .click, w ogóle się nie odzywa. Pomoże ktoś znaleźć błąd?

[HTML] pobierz, plaintext 
(function($){
$('#jgallery_image_thumbs a').click(function(){		
    var mainPath = $(this).attr('href');
    var mainAlt = $(this).attr('title');
 
    $('#jgallery_main_image img').attr({ src: mainPath, alt: mainAlt });
    $('#jgallery_main_image_title').html(mainAlt);
    return false;
	});
})(jQuery);
[HTML] pobierz, plaintext 

I odpowiadający fragment kodu HTML:

[HTML] pobierz, plaintext 
<div class="jgallery" />
<div id="jgallery_main_image">
  <img src="/images/stories/fruit/peas.jpg" alt="peas.jpg"  />
  <h2 id="jgallery_main_image_title">Peas</h2>
</div>
 
<div id="jgallery_image_thumbs">
  <ul>
    <li><a href="/images/stories/fruit/peas.jpg" title="Peas">
       <img src="/images/stories/fruit/peas.jpg" alt="peas.jpg"  />
    </a></li>
    <li><a href="/images/stories/fruit/cherry.jpg" title="Cherry">
       <img src="/images/stories/fruit/cherry.jpg" alt="cherry.jpg"  />
    </a></li>
    <li><a href="/images/stories/fruit/strawberry.jpg" title="Strawberry">
       <img src="/images/stories/fruit/strawberry.jpg" alt="strawberry.jpg"  />
    </a></li>
    <li>
    <a href="/images/stories/fruit/pears.jpg" title="Pears">
        <img src="/images/stories/fruit/pears.jpg" alt="pears.jpg"  />
     </a></li>
  </ul>
</div>
 
</div>
[HTML] pobierz, plaintext 

Z góry dzięki za pomoc, bo mnie już oczy bolą od tego szukania :/

Pokaż to gdzies na żywo.

Wrzuciłem to na żywo tutaj. A tu jest tutorial, z którego korzystałem. I choćbym się wysilał nie wiem jak, to nie jestem w stanie znaleźć różnicy, która mogłaby sprawić, że mój skrypt nie działa... Tak, wiem, że tamto jest na starej wersji jQuery, ale na tamtej też już próbowałem.

Nie działa Ci dlatego, że kod JS wykonuje Ci się jeszcze zanim wyświetlisz linki i obrazki, zdarzenia 'click' nie są wtedy podczepiane do żadnego z tych elementów.

Ten kod:

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
(function($){
	$('#jgallery_image_thumbs a').click(function(e){	
		window.alert('1');
    var mainPath = $(this).attr('href');
    var mainAlt = $(this).attr('title');
 
    $('#jgallery_main_image img').attr({ src: mainPath, alt: mainAlt });
    $('#jgallery_main_image_title').html(mainAlt);
    return false;
	});	
})(jQuery);
</script>
[JAVASCRIPT] pobierz, plaintext 

daj na samym końcu tej strony, albo zostaw tam gdzie jest, ale zmień na:

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
$(document).ready(function(){
  $('#jgallery_image_thumbs a').click(function(e){	
		window.alert('1');
    var mainPath = $(this).attr('href');
    var mainAlt = $(this).attr('title');
 
    $('#jgallery_main_image img').attr({ src: mainPath, alt: mainAlt });
    $('#jgallery_main_image_title').html(mainAlt);
    return false;
	});	
})
</script>
[JAVASCRIPT] pobierz, plaintext 

Ewentualnie zamiast .click(function(){...}) możesz dać .live('click', function(){...})

Ok, chyba nie doczytałem podręcznika, a koniecznie chciałem zachować enkapsulację (to moduł do Joomli, więc wolę, żeby kod był odporny). Myślałem, że podczas enksapsulacji automatycznie się wykona, tak jak skórt $(function(){}). No nic, człowiek uczy się całe życie ^^ Dzięki za pomoc.

jak już napisałem,
Ewentualnie zamiast .click(function(){...}) możesz dać .live('click', function(){...})
To Ci pozwoli zostać przy dotychczasowym zapisie jeśli Ci aż tak na nim zależy.

Nie ma potrzeby robić .live, wystarczy:

[JAVASCRIPT] pobierz, plaintext 
(function($){
  $(document).ready(function(){
  // kod
  });
})(jQuery);
[JAVASCRIPT] pobierz, plaintext 

Jest enkapsulacja i jest (document).ready. Mój problem już jest rozwiązany, ale może komuś innemu się przyda

To też zależy.

Na oficjalnym blogu jQuery był ostatnio artykuł, który mówił o tym, że w części przypadków lepiej używać live zamiast wrappera do DOMContentLoaded. Dotyczy to np. generowania dużego drzewa DOM przez serwer.