Question

我在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

Answer 1

我再次调查了一遍。该错误已经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>"

Answer 2

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

Answer 3

如果文本包含“＃”

，则需要使用“jQuery”覆盖“$”占位符

Answer 4

我不允许触摸js库，我在$('#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
                    }
                });

所以我的代码看起来像

{{1}}

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

4 个答案: