26.02.2017 o 13:06

[jQuery] Dlaczego nie działa funkcja click()?

Czasem zdarza się, że tworząc kod w jQuery używamy funkcji click(), która jest funkcją służącą do wykonywania jakiejś czynności po kliknięciu na jakiś element. Przykład:
jQuery(document).ready(function($){
    $('.item').click(function(){
      alert('dziala');
  });
});
Przykład ten działa tak. Po kliknięciu na element z klasą item wyświetli komunikat w alercie "działa".

Jeśli tworzymy jakiś element dynamicznie lub wczytujemy go dynamicznie, to jest prawdopodobieństwo, że funkcja click() nie działać. Co znaczy dynamicznie? Tzn., że coś jest wykonywane w czasie gdy jesteśmy na stronie.

Na przykład, po kliknięciu na jakiś element wyskakuje nam popup (czyli jakiś tam element na wiechu strony) i mamy tam przycisk x powodujący wyłączenie tego popupu. Ale możliwe jest, że nie zadziała dlatego trzeba wykorzystać funkcję on() z parametrem "click"  i tak na prawdę zmieniamy tylko jedną linijkę.

Zamiast
$('.item').click(function(){
dajemy
$(".item").on( "click", function() {

I to tyle. Proste prawda?
Poniżej przykład zastosowania obu funkcji.

Kod jQuery:
$(".item").click(function() {
  $('.popup').show();
});

$(".popup .exit").on( "click", function() {
  $('.popup').hide();
});
Kod HTML:
<div class="item">click</div>
<div class="popup">
  <div class="exit">
  x
  </div>
  Przykładowa treść
</div>
Kod CSS:
.popup {
  display:none;
}

To jest taki prosty przykład. Jeśli chodzi o samą funkcję on(), to bardzo często ją używam tworząc duże i rozbudowane skrypty w jQuery.

To na tyle w tym poradniku, jeśli nadal macie problemy lub chcecie się wypowiedzieć na temat funkcji click() i on(), to zapraszam do komentowania.

A jeśli pomogłem został łapkę w górę i udostępnij jeśli możesz, tak w ramach podziękowania :)

Pozdrawiam
Drag

Zostaw komentarz
Komentarze
© 2010 - 2024 - Karol Drąg
Wszelkie prawa zastrzeżone
Polityka plików cookies