Question

我有以下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>

将以下jqQuery事件侦听器附加到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);
                }

            });
        }

    });

这适用于FFOX，但不适用于IE7，我不知道为什么???

Answer 1

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

应该做的伎俩。

顺便说一句，用“选择”前缀你的id是没有意义的。它唯一能做的就是通过使jquery隔离你的select标签来减慢它的速度。 Id总是最快的。

编辑 - 正如Sadat所说，这段代码至少应包含在

中

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

如果还没有。

Answer 2

尝试 -

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

);

jquery。不在IE中触发但在FIREFOX中工作

2 个答案: