Question

i have some jquery code here that works fine in firefox but when i test in ie6, i dont see it working at all (the div is not being shown).

here is my html

 <b>Calendar:</b> <select name="CalendarId" id="calendar_list">
 <option value="1">Vacation</option><option value="2">Internal Travel</option>
 <option value="13">ER</option><option value="33">PMO Calendar</option>
 </select>

 <span style="display: none;" id="calendarlabel"></span>

    <hr>

    <div id="location" style="display: none;">
    <label>Travelling to:</label> <select id="location_list" name="TechnicalCentreId">    
 <option></option>
 <option value="1">Bangalore</option>
 <option value="2">Chennai</option>
 </select>
    </div>

here is my javascript:

 $('#calendar_list').live('change', function () {
    var calendarId = $(this).val();
    if (calendarId == 2) {
        $("#location").show();
    }
    else {
        $("#location").hide();
    }
});

First, does anyone know why this code above would not work in ie6 but be fine in all other browswers?

Second, how can i debug this as it seems to only be an issue in ie6 (need firebug equivalent to see whats happening)

Answer 1

IE does not bubble the ‘change’ event properly, so you can’t use live(‘change’).

Instead, bind your behavior to the change event at load time:

$(document).ready(function(){

 $('#calendar_list').change(function () {
 ...
 });
});

http://api.jquery.com/live/