jQuery werkt niet zoals het hoort te werken
Ik volg tutorials over jQuery, maar de jquery werkt niet zoals hij hoort te werken.
Als ik 3 paragrafen aanmaak, en deze onderstaande code bijvoeg dat gebeurt er niks als ik erop klik.
Code (php)
1
2
3
2
3
$("p").click(function () {
$(this).slideUp();
});
$(this).slideUp();
});
Ik heb getest of de code wel word ingelezen, dus had ik een alertbox laten afgaan als het document geladen was en dat deed het gewoon wel...
Weet iemand wat het probleem hier is met jQuery?
Probeer het dus eens in een andere browser (als je chrome gebruikt) en probeer het eens via een click op een button.
Op zich overigens, zou het volgens mij moeten werken, ik zie geen syntax fouten.
Gewijzigd op 12/08/2012 17:29:30 door Erwin H
ik gebruik chrome
Toevoeging op 12/08/2012 17:40:21:
ik gebruik nu:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.min.js'></script>
<script type='text/javascript' src='jquery.js'></script>
</head>
<body>
<input type='button' class='button1' value='Klik'>
</body>
</html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.min.js'></script>
<script type='text/javascript' src='jquery.js'></script>
</head>
<body>
<input type='button' class='button1' value='Klik'>
</body>
</html>
dit is jquery.js
Code (php)
1
2
3
2
3
$('.button1').click(function() {
$(this).css('background-color', 'red');
});
$(this).css('background-color', 'red');
});
Als ik op de button klik gebeurt er niets
Toevoeging op 12/08/2012 17:41:50:
als ik dit open in firefox krijg ik ook geen resultaat
Met alleen de js code was het niet te zien, maar nu wel. Je plaatst de js code voor de HTML waardoor op het moment dat je event handler wordt ingeladen er nog geen element is om aan te binden. De eventhandler bestaat dan dus wel, maar ziet geen button en dus reageert hij nergens op.
Twee oplossingen:
1 - plaats je event handler binnen een $(document).ready().
Code (php)
1
2
3
4
5
2
3
4
5
$(document).ready(function(){
$('.button1').click(function() {
$(this).css('background-color', 'red');
});
});
$('.button1').click(function() {
$(this).css('background-color', 'red');
});
});
2 - plaats de links naar je scripts helemaal aan het einde van je document, na alle HTML, net voor je </body> tag.
Keuze is aan jou, sommige zweren bij oplossing 2, ik gebruik oplossing 1.
Bedankt! ik zal het direct ff proberen
Toevoeging op 12/08/2012 19:12:29:
het werkt perfect!