JQuery and IE8, Compatibility Mode, and IE7 Emulation

Question

I'm working with a solution using JQuery that was developed and tested in IE8.

I have a user, that had "Display all websites in Compatibility View" under Tools > Compatibility View Settings. And part of the JQuery Failed.

$(document).ready(function() {

    // creating named variables to represent the throbber objects to make life easier later.
    var moSearchThrobber = $("#imgSearchThrobber");
    var moFilterThrobber = $("#imgFilterThrobber");

    //lets hide the search and filter dialogs.
    $("div[id*=pnlSearch_Dialog]").hide();
    $("div[id*=pnlFilter_Dialog]").hide();

    // when I change the value of my drop downs in search and in filter, set the hidden field value.
    $("select[name=ddlValue]").change(function() {
        $(this).siblings("input:hidden").val($(this).val());
    });
    // If the user clicks on the Search link button.
    $("a[id*=lnkSearch").click(function() {

        // while we are at it turn on the search throbber
        moSearchThrobber.css('visibility', 'visible');

        // find the search grid and get/each through all the rows.
        $("table[id*=grdSearch]").find("tr").each(function() {

The hide functions work... but the click method fails to fire...

I've been looking at trying to force it into IE8 and turning off compatibility mode via the meta tag... but that feels dirty to me. Are there any other options at this point to make jquery work the same across all 3 "versions" of IE8?

Answer 1

Since my comment seemed to resolve your issue, I'm adapting it to an answer.

You are missing an end square bracket (]) in your lnkSearch selector. I would've expected that would break in IE8 and IE9, but apparantly document.querySelectorAll() accepts it. However, IE7 uses sizzle since it doesn't support document.querySelectorAll(). It seems sizzle does not like the malformed attribute selector.

Here's a test page with malformed attribute selectors. Switch between IE9, IE8, and IE7 modes and notice that it works in IE9 and IE8, but fails in IE7.

Here's the test page with corrected attribute selectors. Notice it works in all versions.

Answer 2

I use the meta tag, as does HTML 5 Boilerplate and other reputable sources. But you're right, IE is a dirty business.

Edit:

According to Microsoft, IE=edge should always give you the latest rendering engine available. An exception would be intranet pages, which need to use IE=9 explicitly to avoid compatibility mode.