If checked, jQuery not working in IE 9?

Here I use the jquery checkbox click function and if I click on the checkbox in IE 9 if ($(this).is(':checked')) , it does not throw a warning ... but it works in IE 10, firefox and chrome

 if (isChildAvail == "true") { $(this).change(function() { if ($(this).is(':checked')) { alert("test"); $(this).parent().parent().append('<div id="divedit" class="editdiv"><p id="p_childlabel" class="childlabel">Children : ' + ChilAvailCount + ' </P><a class="childlabeledit">Edit</a></div>'); $('.editdiv a').click(function() { $(this).parent().parent().append($("#divchildcontrol")); EditForPullups(); }); } } 

Any suggestion

EDIT:

  $(this).change(function() { 

The problem is with the Change function, not with this if ($(this).is(':checked'))

EDIT (2):

 var strCheck = ""; $('.consumer-communication-checkbox').each(function () { strCheck = $(this).parent().text(); if (strCheck.toLowerCase().indexOf("hugg") >= 0) { //scenario without child if (isChildAvail == "false") { jQuery(':checkbox').change(function () { if ($(this).prop('checked') === true) { $(this).parent().parent().append($("#divchildcontrol")); IsChildcontrolwithH = "1"; IsChildcontrolwithG = "0"; IsChildcontrolwithP = "0"; } else { if (IsChildcontrolwithH == "1") { $("#divpersonalrightheader").append($("#divchildcontrol")); } } }); } //scenario with child else { if ($(this).prop('checked') === true) { //Set SubscribedCode SubscribedCode = "H"; $(this).parent().parent().append('<div id="divedit" class="editdiv"><p id="p_childlabel" class="childlabel">Children : ' + ChilAvailCount + ' </P><a class="childlabeledit">Edit</a></div>'); $('.editdiv a').click(function () { $(this).parent().parent().append($("#divchildcontrol")); EditForH(); }); } jQuery(':checkbox').change(function () { if ($(this).prop('checked') === true) { $(this).parent().parent().append('<div id="divedit" class="editdiv"><p id="p_childlabel" class="childlabel">Children : ' + ChilAvailCount + ' </P><a class="childlabeledit">Edit</a></div>'); $('.editdiv a').click(function () { $(this).parent().parent().append($("#divchildcontrol")); EditForH(); }); } else { $("#divedit").remove(); if (IsChildcontrolwithH == "1") { $("#divpersonalrightheader").append($("#divchildcontrol")); IsChildcontrolwithH = "0"; IsChildcontrolwithG = "0"; IsChildcontrolwithP = "0"; } } }); } } 

EDIT (3) : HTML content

  <div class="consumer-checkbox-wrap checked"> <label class="consumer-communication-label checkbox" for="communication_11"> <input name="communication_11" class="consumer-communication-checkbox checkbox" id="communication_11" type="checkbox" checked="checked" value="true"><img src="Images/PMURP_Logos/hugg.jpg"> s <p> Please send me communications, savings, and special offers from hugg® Communications </p> </label> <input name="communication_11" type="hidden" value="false"><a href="http://www.hugg.com/email/12162011/SampleNewsletter.html" target="_blank"><img src="../kcsso/images/Newsletter/hugg.jpg"></a> </div> <div class="consumer-checkbox-wrap"> <label class="consumer-communication-label checkbox" for="communication_13"> <input name="communication_13" class="consumer-communication-checkbox checkbox" id="communication_13" type="checkbox" value="true"><img src="Images/PMURP_Logos/scott.jpg"> <p> Please send me communications, savings, and special offers from scott® Communications</p> </label> <input name="communication_13" type="hidden" value="false"><a href="http://www.scott.com/email/11042011/samplenewsletter.html" target="_blank"><img src="../kcsso/images/Newsletter/scott.jpg"></a> </div> 
+6
source share
5 answers

At the end of the code you posted, there are a few closing brackets missing, I'm not sure if you just didn't copy / paste all of this or missed or broken your code:

This is what you posted (after entering the indentation):

 if (isChildAvail == "true") { $(this).change(function () { if ($(this).is(':checked')) { alert("test"); $(this).parent().parent().append('<div id="divedit" class="editdiv"><p id="p_childlabel" class="childlabel">Children : ' + ChilAvailCount + ' </P><a class="childlabeledit">Edit</a></div>'); $('.editdiv a').click(function () { $(this).parent().parent().append($("#divchildcontrol")); EditForPullups(); }); } } 

Missing end of change event handler ); , as well as closing closed for if } block:

 if (isChildAvail == "true") { $(this).change(function () { if ($(this).is(':checked')) { alert("test"); $(this).parent().parent().append('<div id="divedit" class="editdiv"><p id="p_childlabel" class="childlabel">Children : ' + ChilAvailCount + ' </P><a class="childlabeledit">Edit</a></div>'); $('.editdiv a').click(function () { $(this).parent().parent().append($("#divchildcontrol")); EditForPullups(); }); } }); } 

This (simplified) example works fine for me in IE9: http://jsfiddle.net/rT2dT/1/

 $(':checkbox').change(function () { if ($(this).is(':checked')) { alert("test"); } }); 

Alternatively try

 $(':checkbox').change(function () { if ($(this).prop('checked') === true) { alert("test"); } }); 

What version of jQuery are you using?

EDIT: Following your 2nd right from above:

I see that you attach event handlers in each loop

 $('.consumer-communication-checkbox').each(function () { 

I assume that this selector will be on different checkboxes on your page. Inside this each look, you attach change handlers like this:

 $(':checkbox').change(... 

This selector will provide you with all the checkboxes on the entire page, and not just one in the area. In each iteration of each loop, you attach one of these event handlers to each flag on the page. Without knowing your HTML markup, I cannot tell you exactly what is happening, but this will cause everything to work as expected in isolated examples (like JSFiddle.net) and return random results in context.

+6
source

Try replacing $ with jQuery . I may be mistaken, but it looks like another library is overriding the mechanics of $ and causing the undefined method to be called.


UPDATED UPDATE:

So this is the part that does not work properly:

 //else { $("#divedit").remove(); if (IsChildcontrolwithH == "1") { $("#divpersonalrightheader").append($("#divchildcontrol")); IsChildcontrolwithH = "0"; IsChildcontrolwithG = "0"; IsChildcontrolwithP = "0"; } //} 

There is nothing wrong.

However, if none of the elements with the divpersonalrightheader identifier or the element with the divchildcontrol id currently exists, this will do nothing. Of course, I assume that your logical stuff with IsChildcontrolwith* variables is correct. It might be a good idea to remove these variables in order to avoid working with many flag variables. If you need to put some data around an element, you can use $(...).data() .

+3
source

Just adding to the UweB answer that I saved. IE9 and other versions are very picky when it comes to syntax, while other browsers will miss some commas or brackets depending on what they are.

+2
source

IE9 should not have a problem using is(":checked") and $.change , since both are supported by the version of jQuery you are using (and I think I'm working on any version for this question).

Since you did not specify the HTML structure used, I created some assumptions based on the scripts in EDIT (2).

  • There are several flags with the class consumer-communication-checkbox
  • Each of these flags is wrapped in a parent element. (I used a div for my sample).
  • You are trying to associate change events with these flags (either isChildAvail is true or false), but ONLY IF the parent container has text containing "hugg".
  • You also want to make logic for checkboxes that are checked when the document is loaded correctly and ready.

With these assumptions, I created a simple code similar to yours: http://jsfiddle.net/9FtjU/3/

HTML is encoded based on my 1st and 2nd assumptions above. JavaScript is just a simplified version. In the script, I entered the variable isChildAvail ; You can change the value that it copies different results.

The problem may be that you have attached the change event to all checkboxes.

I also simplified it (using my 3rd and 4th assumptions) to separate the change event from the iteration: http://jsfiddle.net/ub7kS/1/

I tested both jsfiddle links above and both of them work in IE9.

===

In another problem, you can also check the click event handler for $('.editdiv a')

UPDATE

I edited the two jsfiddle links above. This is similar to your script: http://jsfiddle.net/hunLQ/ And this is the one with a separate change event handler and iteration: http://jsfiddle.net/hunLQ/1/

Feel free to modify and use either as a guide. Just change the alert to your logic.

+1
source

If it still doesn't work, you can track your error when a jquery browser is detected, which is very simple to find out if any particular script in a particular browser works or not.

The code for detecting the browser through Js / Jquery is given below:

if (navigator.userAgent.toLowerCase (). indexOf ('chrome')> -1) {// your message comes here}

this code is only for the Chrome browser, which you can define for any (desktop, mobile phone or tablet) browser

+1
source

Source: https://habr.com/ru/post/950330/


All Articles