Skip to main content

Bug Tracker

Side navigation

#3963 closed bug (worksforme)

Opened January 22, 2009 07:59PM UTC

Closed October 14, 2009 02:04AM UTC

Last modified March 15, 2012 03:03PM UTC

change function with IE

Reported by: wilkinnh Owned by:
Priority: major Milestone: 1.3.2
Component: unfiled Version: 1.3
Keywords: change Cc:
Blocked by: Blocking:
Description

specifically with IE7, the change event doesn't seem to fire till i click the checkbox, and then click off of the checkbox. it was actually 2 clicks instead of just 1. seems like it's only an IE error. the click function works just fine, so i can use that instead and check the this.checked value.

Attachments (0)
Change History (5)

Changed January 22, 2009 09:33PM UTC by dz comment:1

That's because until the checbox loses focus, it hasn't "changed".

Changed January 23, 2009 02:27PM UTC by wilkinnh comment:2

Well, even if that is true, that doesn't really solve the problem. It's still inconsistent between browsers. jQuery's appeal is that it should cross-browser and that the developer doesn't have to worry about it.

It's either that IE is right to not lose focus and every other browser is wrong, or the other browsers are right and IE is wrong. Either way, it's an IE bug because it's only occurring in IE. I know it can be fixed because the click function works perfectly. Really, all that needs to be done is to emulate the click function, but also make sure the value has changed.

Changed January 27, 2009 06:45AM UTC by johal comment:3

@wilkinnh If its that simple, why do you write up a patch :)

Changed February 10, 2009 03:14PM UTC by JohnC comment:4

an example of this is

<div id="navigation">
<ul>
                <li><a href="test.htm">Item
                                </a>
                                <ul>
                                                <li><a href="test.htm">Item</a></li>
                                                <li><a href="test.htm">Item
                                                                </a>
                                                                <ul>
                                                                                <li><a href="test.htm">Item</a></li>
                                                                                <li><a href="test.htm">Item</a></li>
                                                                </ul>
                                                </li>
                                </ul>
                </li>
                <li><a href="test.htm">Item
                                </a>
                                <ul>
                                                <li><a href="test.htm">Item
                                                                </a>
                                                                <ul>
                                                                                <li><a href="test.htm">Item</a></li>
                                                                                <li><a href="test.htm">Item
                                                                                                </a>
                                                                                                <ul>
                                                                                                                <li><a href="test.htm">Item</a></li>
                                                                                                                <li><a href="test.htm">Item</a></li>
                                                                                                                <li><a href="test.htm">Item</a></li>
                                                                                                                <li><a href="test.htm">Item</a></li>
                                                                                                                <li><a href="test.htm">Item</a></li>
                                                                                                </ul>
                                                                                </li>
                                                                </ul>
                                                </li>
                                                <li><a href="test.htm">Item</a></li>
                                </ul>
                </li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
        $("#navigation>ul>li>a").each(function () {
        $(this).before($(this).text());
        $(this).remove();
        });

        var checknum = 0;
         $("#navigation a").each( function () {
        checknum = checknum +1;
        newInput = document.createElement("input");
        newInput.setAttribute("name","dchannel"+checknum);
        newInput.setAttribute("id","dchannel"+checknum);
        newInput.type = "checkbox";
        newInput.value = $(this).attr('href').replace(/'/ig, "\\'");

        $(newInput).insertBefore(this);
        newLabel = document.createElement("label");
        newLabel.setAttribute("for","dchannel"+checknum);
        newLabel.innerHTML = $(this).text();
        $(newLabel).insertBefore(this);
         $(this).remove();
  });

$("input:checkbox").change(function () {

if($(this).attr("checked")) {

$(this).parents("li:first").find("input:checkbox").each(function () {

$(this).attr("checked", true);

});
} else {

$(this).parents("li:first").find("input:checkbox").each(function () {

$(this).attr("checked", false);

});
}
});

 });
</script> 

can be fixed by changing the line

$("input:checkbox").change(function () {

to

 $("input:checkbox").bind("change click keypress", function(){

Changed October 14, 2009 02:04AM UTC by dmethvin comment:5

resolution: → worksforme
status: newclosed

JohnC has provided the best solution to this issue.