Jquery on click not working very weird

Question

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 ?

Well looks like what ever that code is doing, it is hiding your checkbox so you are not going to be be clicking on that element. Hopefully that code triggers a change event you can bind too. — epascarello, May 01 '15 at 12:20
Is the input dynamic? Try delegating the event http://stackoverflow.com/q/203198/3639582. — Shaunak D, May 01 '15 at 12:39
If you are `transforming` as mentioned then you need to delegate event handling — charlietfl, May 01 '15 at 13:18

score 2 · Answer 1 · answered May 01 '15 at 12:21

2

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">

answered May 01 '15 at 12:21

Turnip

35,836
15
89
111

Thank you I know this works, it was a typo for the example. In normal code it works but my code gets rewritten for design as you can see in my example. – AVGG May 01 '15 at 12:23
Some AJAX Is changing this afterwards, I know if i write this code directly in my source its working. But thanks. – AVGG May 01 '15 at 12:28

score 0 · Answer 2 · answered May 01 '15 at 12:25

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');
});

Your answer seems to be the most true. Still not working. Will experiment further, thanks. — AVGG, May 01 '15 at 12:28

score 0 · Answer 3 · answered May 01 '15 at 12:40

0

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

https://jsfiddle.net/ToreanJoel/jjd2ode8/

answered May 01 '15 at 12:40

TrojanMorse

642
1
8
16

score 0 · Answer 4 · edited May 05 '15 at 14:18

0

$(".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.

edited May 05 '15 at 14:18

Jonas Czech

12,018
6
44
65

answered May 01 '15 at 12:42

AVGG

21
5

Jquery on click not working very weird

4 Answers4