jquery .change not firing in IE but working in FFOX

Question

I have the following HTML:

<form method="post" action="#" name="dialog_head" id="dialog_head" class="jqtransform">   
    <ul>
        <li class="pdf">
            <a title="This PDF document opens in a new window" target="_blank" href="#">Save as PDF</a>
        </li>
        <li class="print">
            <a target="_blank" href="#">Print Price Report</a>
        </li> 
        <li>
            <label for="dialog_select">Select Price Report:</label>
            <select name="dialog_select" id="dialog_select"><option value="PriceReport/13415939">23 April 2010</option>
<option value="PriceReport/13415510">16 April 2010</option>
<option value="PriceReport/13415009">09 April 2010</option>
<option value="PriceReport/13414608">02 April 2010</option>
</select>
        </li>   
    </ul>
</form>

With the following jqQuery event listener attached to the select:

   $('select#dialog_select').live('change', function() {
        alert("foo");

        //set the select value
        var $optionVal = $(this).val();

        if ($optionVal != '') {

            // remove testing class for when new report has been requested
            $('#cboxLoadedContent > div').addClass('dialog_loading').removeClass('dialog_loaded');

            // call the price report and replace current price report
            $.ajax({
                type: 'GET',
                url: $optionVal,
                dataType: 'html',
                cache: true,
                success: function(data) {

                    var $findData = $(data).find('.Section1');

                    $('.Section1').fadeOut('fast', function() {

                        $('.Section1').replaceWith($findData).fadeIn('fast');

                        $('.Section1, .Section1 table').css({
                            'width': '95%',
                            'margin': 'auto'
                        });

                        // testing class for when report has been successfully loaded
                        $('#cboxLoadedContent > div').removeClass('dialog_loading').addClass('dialog_loaded');

                    });
                },

                error: function(xhr, ajaxOptions, thrownError) {
                    // testing class for load error
                    $('#cboxLoadedContent > div').removeClass('dialog_loading dialog_loaded').addClass('dialog_load_failure');
                    alert(xhr.status);
                    alert(thrownError);
                }

            });
        }

    });

This works in FFOX but not in IE7 and i don't know why???

Answer 1

Try like-

$(
  //do your all job here
   $('select#dialog_select').live('change', function() {
   ....
   ....
   )

);

Answer 2

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

should do the trick.

There's no point in prepending your id with "select" by the way. The only thing it could do is slow down jquery by making it isolate your select tags. Id is always fastest.

EDIT - as Sadat mentioned, this code should be wrapped in at least a

$(document).ready(function(){ ... }); 

if it isn't already.