JQuary nyelv használatakor furán viselkedik a weboldalam. Mi lehet ennek az oka?
A kód alapvetően ennyi:
<!DOCTYPE html>
<html>
<head>
<script src=" [link]
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
A fenti kódot beillesztettem a saját weblapomba is, viszont érdekes dolog történik. Ha rákattintok Toggle gombra akkor eltűnik a paragrafus (eddig az történik aminek kell is), viszont ez után rögtön frissül az oldalam és megint minden ugyan olyan... Miért frissül az oldalam kattintás után? Ha a gombot a paragrafusokkal együtt rögtön a body nyitó tag-e után helyezem el rögtön akkor viszont jól működik a dolog...
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz1.png)
Meg kellene akadályozni hogy a buborék továbbterjedjen. (bubbling) Próbáld így:
$(document).ready(function(){
$("button").click(function(e){
e.preventDefault()
$("p").toggle();
});
});
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz1.png)
A böngésző egy elemre a feliratkozott eseményeket "felfelé" haladva, a szülőkön át is végrehajtja. Ha nem akarod, hogy a szülő azonos eseménye is végrehajtódjon, meg kell "akasztanod" ezt a folyamatot, ennek egyik módja a preventDefault, de lehet máshogy is.
Találtam ezt, itt részletesen leírják.
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz2.png)
![*](http://static.gyakorikerdesek.hu/p/vsz1.png)
![*](http://static.gyakorikerdesek.hu/p/vsz0.png)
Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!