如何防止jquery.ui.dialog将窗口滚动到顶部(以编程方式调用时)

Question

我有以下代码：

    $(".foo-form").submit(function (event) {
        event.stopPropagation();
        event.preventDefault();
        $.ajax({
            url: this.action,
            data: $(this).serializeArray(),
            type: 'POST',
            dataType: 'json',
            success: function (data, msg, resp) {
                var $form = $("#second-form");
                $form.show().dialog({
                    resizable: false,
                    height:400,
                    width: 600,
                    modal: true,
                    title: "Recommendation added",
                    buttons: [
                        {
                            text: "OK",
                            click: doOK
                        },
                        {
                            text: "Cancel",
                            click: doCancel
                        }
                    ]
                });
            }
        })
        return false;
    });

如果我在页面上向下滚动并提交表单，则当显示对话框时，它会将页面滚动到顶部。有什么办法可以覆盖它吗？

不是解决方案的事情

• 修复.ui-dialog类的定位。它是未经修改的（使用谷歌的CDN）
• 不取消事件 - 如您所见，我调用 stopPropagation 、 preventDefault 并返回 false。 所以并不是事件正在经历（即使有，它也不是页面顶部的哈希链接）

使用 jQuery

1.72 和 jQuery UI 1.8.21（每个最新版本）。

Answer 1

我在使用 jQuery 对话框时遇到了同样的问题，当我调用对话框时，我添加了"event.preventDefault（）;"修复了它，例如：

$(".button").click(function(event){
event.preventDefault();
$("#dialog").dialog();
});

Answer 2

我在使用 jQuery 对话框和 href 标签时遇到了类似的问题。我所要做的就是从 a 标签中删除 href="#"，这解决了我的问题。

将<a href='#'>SHOW</a>更改为<a>SHOW</a>

Answer 3

尝试添加一个关闭函数并在里面使用 preventDefault，对我有用

$form.show().dialog({
                close: function (event) { event.preventDefault(); }
                resizable: false,
                etc....
            });

Answer 4

我发现最好的解决方法是返回 false; 打开对话框后。

因此，只需将返回 false 移动到对话框函数之外。 我知道这是一个老问题，但在这里没有看到这个解决方案，它对我有用。

stopPropagation、preventDefault（） 和 return false 的问题在于它们都在错误的位置。

我就是这样做的。

   $("<div><p>" + text + "</p></div>").dialog({
        modal: true,
        resizable: false,
        width: width,
        buttons: {
            Ok: function() {
                $(this).dialog("close");
            }
        }
    });
    return false;

Answer 5

由于<a href=""></a>标签而滚动。

用

<a class="someClass" href=#!"></a>

防止滚动到顶部