Here am using a jquery checkbox click function and if i click a checkbox in IE 9 if ($(this).is(':checked'))
it is not throwing the alert message..but it is working 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 issue is with the Change function and not this one 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>
The code you posted is missing a few closing brackets at the end, I'm not sure if you simply didn't copy/paste it all, or if it's missing and breaking your code:
This is what you posted (after tidying up 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();
});
}
}
It is missing the end of the change event handler ); as well as the closing bracked for the 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");
}
});
Which jQuery version are you using?
EDIT: Following up on your 2nd edit from above:
I see that you are attaching event handlers in an each
loop
$('.consumer-communication-checkbox').each(function () {
I assume that that selector will be on various checkboxes on your page. Inside that each
look, you attach change handlers like so:
$(':checkbox').change(...
This selector will give you all the checkboxes on the entire page, not just the one in scope. In each iteration of the each
loop you are attaching one of those event handlers to every checkbox on the page. Without knowing your HTML markup, I can't tell you what is happening exactly, but this will be the reason why everything works as expected in isolated examples (like as JSFiddle.net) and returns random results in context.
Try replacing $
with jQuery
. Maybe I'm wrong, but it looks like another library is overriding the $
mechanics and leads to an undefined method call.
UPDATED UPDATE:
So this is the part that isn't working as expected:
//else {
$("#divedit").remove();
if (IsChildcontrolwithH == "1") {
$("#divpersonalrightheader").append($("#divchildcontrol"));
IsChildcontrolwithH = "0";
IsChildcontrolwithG = "0";
IsChildcontrolwithP = "0";
}
//}
There is nothing wrong with it.
However, if either element with ID divpersonalrightheader or element with ID divchildcontrol doesn't exist at this point, this won't do anything. Off course, I assume that your logic stuff with IsChildcontrolwith*
variables is correct. It may be a good idea to remove those variables in order to avoid dealing with many flag-like variables. If you need to put some data around an element, you can use $(...).data()
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With