MVC3: IE8 crashing from use of JqueryUI in a list

Question

I'm using a VS2010+MVC3(Razor)+IE8+JQueryUI stack and I was trying to create a list of buttons using the jqueryui .buttons() function. However, for some unknown reason it would consistently crash Dev-Webserver+IE8 when the button was pressed. The code below is necessary and sufficient to demonstrate the bug. Simply cut and paste it into your Home/Index.chtml file and run.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script> 

<ul>
    <li>
        <div>
            <label for="aa">text</label>
            <input type="checkbox" id="aa" class="theclass"/>
        </div>
    </li>
</ul>
<script type="text/javascript">
                            $(function () {
                                $(".theclass").button();
                            });
</script>

This works fine with Chrome, and the error also does not occur if you drop this into a plain HTML file and ran outside of VS2010, so this may be something specific to MVC/ASP. Removing the surrounding div will stop this from crashing. Notably, this only crashes when the button is the last button in the div group. As a hack I added an empty div after the input element, and this stopped it from crashing. This was a very idiosyncratic error and so I'm posting this here in case someone has similar troubles.

Cheers Rob

Answer 1

IE8 has a whole bunch of bugs. Best suggestion is to take a look at this list of IE8 bugs. I use this list whenever I find an IE8 bug.

http://jhop.me/ie8-bugs

The closest thing I can find on that page would be the following javascript bug.

Utilising querySelectorAll within a statement that breaks out of a for loop, triggers a full program crash.

It's possible the jQuery method is causing that or the button method is causing that. Why are you trying to make a checkbox into a button? I don't think the button method is supposed to work like that.

Answer 2

This happened to me as well, but not in VS2010 and not with MVC, it's just something that seems to happen with the jQueryUI button...

My solution was simple, wrap the offending elements in a SPAN tag. In the above example, this should fix the issue...

<span class="theclass"><input type="checkbox" id="aa"></span>