Inline handler not being called in IE9 for select element

Question

I'm trying to figure out what could be causing a problem in IE9 on a production machine. We have a <select> combo box with an inline change handler (I'm aware that's bad practice but I can't do anything about that at the moment) that is not getting called.

The HTML looks like the following (copied from dev tools)

<select name="propertyName" id="propertyName" onchange="Workflows.CoreSetPropertyActivity._field_OnChange();">
  <option value="Property_103156" title="Boolean Prop" selected="selected">Boolean Prop</option>
  <option value="Property_103072" title="String Prop A">String Prop A</option>
</select>

While on a webex with the customer, I put a breakpoint in Workflows.CoreSetPropertyActivity._field_OnChange() and it was not being called (in IE9). If I call it manually from the console, everything works.

We went to the exact same machine with IE8 and Workflows.CoreSetPropertyActivity._field_OnChange() was being called and everything was working correctly.

The only other information that I think may be relevant is the fact that the dropdown is created dynamically.

Anybody run across something similar? Any suggestions on what to try? Maybe some setting in IE that can break this spell?

Creation of HTML

The select is being added to the page with the following code. The HTML to be inserted looks like

<div class="wrapper">

    <ul id="setStateConditions">
        <li class="setStateLabel">Property Name</li>
        <li class="setStateContent">
            <select name='propertyName' id='propertyName'  onchange='Workflows.CoreSetPropertyActivity._field_OnChange();' >
<option value='Property_103156' title='Boolean Prop'  selected='selected' >Boolean Prop</option>
<option value='Property_103072' title='String Prop A' >String Prop A</option>
</select>
<br />
<input id="filterExpression" name="filterExpression" type="hidden" value="" />

<script type="text/javascript">

    _condition_strings = 
    {
        "equal": "Is Equal To",
        "not_equal": "Is Not Equal To",
        "contains": "Contains",
        "less_than": "Is Less Than",
        "less_than_or_equal": "Is Less Than or Equal To",
        "greater_than": "Is Greater Than",
        "greater_than_or_equal": "Is Greater Than or Equal To",
        "literal": "Literal Value",
        "is_collected": "Has Been Collected",
        "is_not_collected": "Has Not Been Collected"
    }; 


    function getLeftUrl(leftMenu, value) {
        var selectedProperty = $('#propertyName').val() || '';

        return "/Property/ReflectionMenuLeftByRelation/" + workflow.data_provider_id
             + "?relationSafeName=" + selectedProperty 
             + "&nameWithParents=" + value; 
    };

    function getRightUrl(rightMenu, value) {
        //Find value of left to filter 
        var selectedProperty = $('#propertyName').val() || '';
        var leftMenuValue = rightMenu.item.prevAll(".left-operand").eq(0).attr("value") || '';

        return "/Property/ReflectionMenuRightByRelation/" + workflow.data_provider_id
             + "?relationSafeName=" + selectedProperty
             + "&nameWithParents=" + value
             + "&compatableWithSafeName=" + leftMenuValue; 
    };

    function getOperatorUrl(operatorMenu, value) {
        //Find value of left in order to get the correct list of 

        var selectedProperty = $('#propertyName').val() || '';
        var leftMenuValue = operatorMenu.item.prevAll(".left-operand").eq(0).attr("value") || '';

        return "/Property/OperatorsByRelation/" + workflow.data_provider_id
             + "?relationSafeName=" + selectedProperty
             + "&compatableWithSafeName=" + leftMenuValue; 
    };

    function getLiteralControlUrl(rightMenu, startValue, leftMenuValue, uniqueRowCounter) {
        var selectedProperty = $('#propertyName').val();
        var leftMenuValue = leftMenuValue || rightMenu.item.prevAll(".left-operand").eq(0).attr("value") || '';

        return "/Property/PropertyValueByRelation/" + workflow.data_provider_id
             + "?relationSafeName=" + selectedProperty
             + "&safeNameWithParents=" + leftMenuValue
             + "&domId=literal_" + uniqueRowCounter
             + "&startValue=" + startValue; 
    }

    function getDereferenceUrl(menu){
        var selectedProperty = $('#propertyName').val() || '';

        return "/Property/ResolveSafeNameToDisplayNameByRelation/" + workflow.data_provider_id
             + "?relationSafeName=" + selectedProperty
             + "&safeNameWithParents=" + menu.getValue();
    }






    $(function() {
        ExpBuilder.init($("#filterExpression").val());

        //Move to a wider space
        $("#expressionBuilder").appendTo("#propertyValueWide");
    });

onSaveParameters = function() {
    //When User clicks save
    if ($("#expressionBuilder").is(":visible")) {
        //TODO check for empties    
        $("#filterExpression").val(ExpBuilder.getJson())
        Workflows.CoreSetPropertyActivity._UpdateJson()
    }
}

ExpBuilder.errorNoCondition = 'There are no conditions.';

</script>

<div id="expressionBuilder" style="display:none;">
    <div class="clr"></div>
    <div class="condLoader"></div>
    <div class="condWrapper" style="display:none;">
        <div class="conditionGroup condTier1 condTop" >
            <div class="conditionGroupBullet"><div><img src="/images/spacer.gif" alt="" width="10" height="3"></div></div>
            <div class="conditionHead">
                <div class="conditionOperation">
                    <select id="100" name="anyAll">
                        <option value="or">Any</option>
                        <option value="and">All</option>
                    </select> 
                </div>
                <div class="closeBtn"><img src="/images/buttons/close.png" class="closeGroupImg" alt=""></div>
            </div>
            <div class="conditionContent"></div>

            <ul class="buttons buttonsLeft">
                <li>
                    <a href="#" class="btnAddCondition"><span>Create Condition</span></a>
                </li>
                <li>
                    <a href="#" class="btnAddConditionGroup"><span>Create Group Condition</span></a>
                </li>                
            </ul>
        </div> 
    </div>
    <ul class="buttons buttonsLeft hidden">
        <li>
            <a href="#" class="btnAddCondition" onclick="CreateJsonBase();return false;"><span>Create Json</span></a>
        </li>       
        <li>
            <a href="#" class="btnAddCondition" onclick="ExpBuilder.LoadData();return false;"><span>Load Json</span></a>
        </li>                     
    </ul>

    <!-- Template for Conditions -->
    <div class="condition hidden">
        <div class="conditionBullet"><div><img src="/images/spacer.gif" alt="" width="10" height="3"></div></div>
        <div class="conditionItem">

            <a href="#" class="left-operand"></a> 
            <a href="#" class="operator"></a> 
            <a href="#" class="right-operand"></a>
            <span class="right-literal"></span>

        </div>
        <div class="closeBtn"><img src="/images/buttons/close.png" class="closeImg" alt=""></div>
        <div class="clr"></div>
    </div>

</div>

<span id="propertyValue">
    <input type="checkbox" id="setDefault" onclick="Workflows.CoreSetPropertyActivity._field_OnChange();" />
    <label for="setDefault">Default Value</label>

    <span id="defaultOptions"> 
        <input id="setPropertyValue" name="setPropertyValue" onblur="Workflows.CoreSetPropertyActivity._UpdateJson();" onchange="Workflows.CoreSetPropertyActivity._UpdateJson();" onkeypress="Workflows.CoreSetPropertyActivity._UpdateJson();" type="text" value="" /><br />
        <input type="checkbox" id="allowEdit" onclick="Workflows.CoreSetPropertyActivity._field_OnChange();" />
        <label for="allowEdit">Allow Edit</label> <br />
    </span>
</span>

<div>
    <input type="checkbox" id="isRequired" onclick="Workflows.CoreSetPropertyActivity._field_OnChange();" checked/> 
    <label for="isRequired">Is Required</label>
</div>
<input type="text" id="PropertyName" class="hidden" />


        </li>
    </ul>


    <div id="propertyValueWide"></div>


    <div class="clr"></div>
</div>

And it's added to the page using (where htmlString contains the HTML I've shown above)

$(htmlString).appendTo('.settings-form');

Answer 1

It turns out the the problem is that the customer was running IE9 with the release to manufacturing version (RTM) which is a pre-release of Internet Explorer just before the GA release.

The customer installed IE9 on a different machine and the problem is gone. I'm pretty confident that it will be fixed when they reinstall IE on that machine.

Thanks everyone for pitching in.