Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

If this is checked jquery is not working in IE 9?

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>
like image 374
bala3569 Avatar asked Jul 26 '13 07:07

bala3569


2 Answers

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.

like image 82
UweB Avatar answered Sep 17 '22 22:09

UweB


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().

like image 39
Frederik.L Avatar answered Sep 19 '22 22:09

Frederik.L