选择日期后，jQuery UI datepicker会使屏幕滚动到顶部

Posted 2021-03-31

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

以下是对话框的html代码段：

 <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片段：

$(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

答案

我再次调查了一遍。这个bug一直是reported with a workaround。

我正在使用jQuery UI的缩小版本，因此代码如下所示：

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

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

另一答案

我有这个确切的问题，但真正的问题是页面上出现了重复的ID。一旦我删除了重复的ID，问题就完全消失了。

另一答案

如果文本包含“＃”，则需要使用“jQuery”覆盖“$”占位符

另一答案

我不被允许触摸js库，我在onSelect处理程序下添加了这一行。

$('#ui-datepicker-div table td a').attr('href', 'javascript:;');

所以我的代码看起来像

            $('#txtDate').datepicker({
                    // other properties
                    onSelect: function (selectedDate) {
                        $('#ui-datepicker-div table td a').attr('href', 'javascript:;');
                        // other code
                    }
                });