jQuery event doesn't fire
Question
I can't understand why my function doesn't fire, maybe I'm wrong with the selector ?
HTML:
<html>
{% include head.html %}
<body id="general">
<header>
{% include navbar.html %}
<script>
$('input[name=optradio])'.click(function () {
if (this.id == "showdiv") {
$("#onsaanbod").show('slow');
} else {
$("#onsaanbod").hide('slow');
}
});
</script>
</header>
<div class="container-fluid">
<!-- contenttop -->
<div class="row" style="padding-top: 3%; padding-bottom: 3%;" >
{% include /getaquote/contenttop-getaquote.html %}
</div>
<div class="col-md-12 col-lg-10 col-lg-offset-2">
<div class="row">
<div class="col-md-12">
<p> content </p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<!-- start-form -->
<!-- Volume -->
<div class="row">
<div class="col-md-6">
<p> content </p>
</div>
<div class="col-md-6">
<div class="controls">
<form id='form-id'>
<div class="radio">
<label><input type="radio" name="optradio">Meer dan 1000 per jaar</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Tussen 500 en 1000 per jaar</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" id="showdiv">Minder dan 500 per jaar</label>
</div>
</form>
</div>
</div>
</div>
<div class="row" id="onsaanbod" style='display:none'>
<div class="col-md-12">
<h1 class="titlel1"> content </h1>
<p> content </p>
</div>
</div>
</div>
I want to display the second div when the user clicks on the third radio button. I tried to change the position of the script but I don't think it is the problem. I'm sure that It is a trivial issue. It doesn't work!
<!-- footer -->
{% include footer.html %}
</div>
</body>
5 answers
solution1
3 2015-08-13 07:24:46
There's a typo:
$('input[name=optradio])'.click
$('input[name=optradio]').click
and
You should move your js at the bottom of the body, or wrap it in a $(document).ready() method
$(document).ready(function(){
$('input[name=optradio]').click(function () {
if (this.id == "showdiv") {
$("#onsaanbod").show('slow');
} else {
$("#onsaanbod").hide('slow');
}
});
});
It is to make sure the element exists when you apply che click listener to it
solution2
2 ACCPTED 2015-08-13 07:24:53
You'll have to wrap your code in
$(document).ready(function(){
//Code
});
This will ensure the script fires after the page has loaded and thus has it resources to use. In your case your code would look like this:
$(document).ready(function(){
$('input[name=optradio]').click(function () {
if (this.id == "showdiv") {
$("#onsaanbod").show('slow');
} else {
$("#onsaanbod").hide('slow');
}
});
});
solution3
0 2015-08-13 07:25:59
You must wrap your code into:
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});
solution4
0 2015-08-13 07:26:16
Wrap the whole code inside:
$(document).ready(function(){
// Here..
});
This will execute only after all the DOM Elements are loaded.
solution5
0 2015-08-13 07:28:06
If you are already taking id, why not use it on first hand?
Make sure you have 1.7+ version of jquery to use prop
<script>
$(document).ready(function()
{
$('#showdiv').click(function()
{
if($(this).prop("checked"))
{
$("#onsaanbod").show('slow');
}
else
{
$("#onsaanbod").hide('slow');
}
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.