jQuery UI datepicker选择日期后导致屏幕滚动到顶部 [英] jQuery UI datepicker causes screen to scroll to the top after selecting a date

问题描述

我在jQuery对话框中有几个jQuery datepicker.每当用户从日期选择器中选择一个日期时，屏幕就会滚动到顶部.这只会在IE8中发生，而不会在Firefox 3.6或Chrome 5中发生.由于大多数用户将使用IE，这将非常令人讨厌.谁能给我一个线索，为什么会这样?

I have a couple of jQuery datepickers inside a jQuery dialog. Whenever users select a date from the datepicker the screen scrolls to the top. This only happens in IE8 not the Firefox 3.6 or Chrome 5. Since the majority of users will user IE this is going to be very annoying. Can anyone give me a clue as to why this is happening?

以下是对话框的HTML片段:

Here is a snippet of the HTML for the dialog:

 <div id="AppointmentDialog" style="display: none; font-size: 12px;">
    <table>
        <tr class="lesson notAvailable allDay">
            <td>
                Start
            </td>
            <td>
                <input id="txtStartDate" type="text" readonly="readonly" style="width: 90px" class="lesson notAvailable allDay" />
                <input id="txtStartTime" type="text" style="width: 50px" class="lesson notAvailable" />
                <input id="hidStartTime" type="hidden" value="" />
            </td>
        </tr>
        <tr class="notAvailable allDay">
            <td>
                End
            </td>
            <td>
                <input id="txtEndDate" type="text" readonly="readonly" style="width: 90px" class="notAvailable allDay" />
                <input id="txtEndTime" type="text" style="width: 50px" class="notAvailable" />
                <input id="hidEndTime" type="hidden" value="" />
            </td>
        </tr>
    </table>
</div>

用于初始化对话框和日期选择器的Javascript代码段:

Snippet of Javascript to initialise the dialog and datepickers:

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

function initDialogs() {
    // Configure the New Appointment dialog
    $("#AppointmentDialog").dialog({
        autoOpen: false,
        resizable: false,
        width: 320,
        modal: true,
        title: 'Appointment',
        buttons: {
            "Close": function() { $(this).dialog("close"); },
            "Save": function() {
                // Function call
            }
        }
    });

    $.mask.definitions['h'] = '[012]';
    $.mask.definitions['m'] = '[012345]';
    $("#txtStartTime").mask("h9:m9");
    $("#txtEndTime").mask("h9:m9");

    // Init date pickers
    $("#txtStartDate").datepicker({ dateFormat: 'dd-mm-yy' });
    $("#txtEndDate").datepicker({ dateFormat: 'dd-mm-yy' });
};

编辑

我正在使用jQuery 1.4.2和UI 1.8.2

I'm using jQuery 1.4.2 and UI 1.8.2

推荐答案

我再次进行了调查.该错误已报告了解决方法.

I've looked into it again. The bug has been reported with a workaround.

我使用的是jQuery UI的精简版，因此代码如下:

I'm using a minified version of jQuery UI so the code looks like this:

(B?" ui-priority-secondary":"")+'" href="#">'+q.getDate()+"</a>")+"</td>"

(B?" ui-priority-secondary":"")+'" href="javascript:;">'+q.getDate()+"</a>")+"</td>"

这篇关于jQuery UI datepicker选择日期后导致屏幕滚动到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！