My sourcecode :
<input class="eanvoera5" type="checkbox" name="nieuwpid">
Gets transformed for design to the below code : (when i view the page in my browser)
<div class="icheckbox_minimal checked" style="position: relative;" aria-checked="true" aria-disabled="false">
<input class="eanvoera5" type="checkbox" name="nieuwpid" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;"></ins>
</div>
Problem :
I can not get my Jquery functions working for the checkbox. If the checkbox is clicked I want to show / hide another box.
Code Jquery :
$(".eanvoera5").on('click', function() {
alert('hitest');
}
Its driving me crazy.. Somebody has an idea ?
You are missing ); at the end of your function...
$(".eanvoera5").on('click', function() {
alert('hitest');
}); // <!-- HERE<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="eanvoera5" type="checkbox" name="nieuwpid"></div>
As you can see there is a syntax error as you are missing the ); closing, but What seems to me that DOM is getting changed via some other script operation. As you mentioned, It might be possible that you should delegate the event to the closest static parent or to the document:
And instead of click you should use change because checkboxes have checked prop, which always gets changed when clicked although click also works.
$("body").on('change', ".eanvoera5", function() {
alert('hitest');
});
Maybe changing your click function to something like this for jQuery
$(".eanvoera5").click(function() {
alert('hitest');
});
Take note of the closing ); like everyone above mentioned
$(".eanvoera5").on('ifChecked', function(event){
alert('hitest');
});
This function works. Documentation can be found here: https://github.com/fronteed/iCheck
iCheck does not work well with Jquery.