Jquery Checkbox change event not firing

Question

Am trying to sortout this small issue from past hour :

<script type="text/javascript">
$(document).ready(function(){        
    $("input[name='isClubMember']:checkbox").mousedown(function() {
         if (!$(this).is(':checked')) {
            this.checked = confirm("Are you sure?");
            $(this).trigger("change");
         }
    });
 });
</script>

Funnily this works in JSFiddle ..but not in my jsp page. Sample

The above code gives me null error at this line (in Debug console)

 $("input[name='isClubMember']:checkbox").mousedown(function() {

JQ -Ver : 1.7.2 Browser : IE8

Update : Error in IE console :

 'null' is null or not an object

at the above mentioned line

Can you post the exact error message you receive? Even if the selector doesn't match anything, mousedown() should still be safe to call. — Frédéric Hamidi
– Frédéric Hamidi, Commented Jul 28, 2012 at 8:56

Frédéric Hamidi · Accepted Answer · 2012-07-28 09:10:17Z

7

It looks like your JSP page includes the Prototype library after jQuery.

Prototype's $() function takes an id and returns null if it cannot find the element, which is consistent with the behavior you're observing.

Try using jQuery instead of $ everywhere in your code:

jQuery("input[name='isClubMember']:checkbox").mousedown(function() {
    // ...
});

Or put your code in a closure that is passed the jQuery object in a $ argument:

(function($) {
    // The rest of your code...
})(jQuery);

Or take advantage of the fact that a ready handler is passed the same $ argument:

jQuery(document).ready(function($) {
    // The code in your 'ready' handler...
});

You may also want to run jQuery in noConflict mode, to avoid overriding Prototype's $() function if the order of inclusion changes.

edited Jul 28, 2012 at 9:10

answered Jul 28, 2012 at 9:03

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Suave Nti Over a year ago

Hamidi : +1 Excellent.. Yes I am using Prototype with scriptaculous.. How do I overcome this one ? Kindly suggest.

easteregg · Accepted Answer · 2012-07-28 08:56:59Z

0

i would suggest, you could add a class name to the checkbox, and find the checkbox by a class name! it seems thats the problem with ie8 in this case!

answered Jul 28, 2012 at 8:56

easteregg

5094 silver badges9 bronze badges

Comments

Danil Speransky · Accepted Answer · 2012-07-28 09:02:33Z

0

I think in your page jQuery is not connected. Check.

I think so because $ - function and returns object anyway, but if there is no jQuery then $(str) returns null.

answered Jul 28, 2012 at 9:02

Danil Speransky

30.5k6 gold badges70 silver badges78 bronze badges

Comments

Krym · Accepted Answer · 2012-07-28 09:05:24Z

0

I guess the selector is broken in IE8 somehow, try [type='checkbox'], should be faster anyway

    $("input[name='isClubMember'][type='checkbox']").mousedown(function() {

answered Jul 28, 2012 at 9:05

Krym

7436 silver badges16 bronze badges

Collectives™ on Stack Overflow

Jquery Checkbox change event not firing

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related