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:
[kod]jQuery(document).ready(function($){
$(’.item’).click(function(){
alert(’dziala’);
});
});[/kod]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[kod]$(’.item’).click(function(){[/kod]dajemy[kod]$(„.item”).on( „click”, function() {[/kod]
I to tyle. Proste prawda?
Poniżej przykład zastosowania obu funkcji.
Kod jQuery:
[kod]$(„.item”).click(function() {
$(’.popup’).show();
});
$(„.popup .exit”).on( „click”, function() {
$(’.popup’).hide();
});
[/kod]Kod HTML:
[kod]<div class=”item”>click</div>
<div class=”popup”>
<div class=”exit”>
x
</div>
Przykładowa treść
</div>[/kod]Kod CSS:
[kod].popup {
display:none;
}[/kod]
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 🙂
Drag
