点击按钮调用window.location.replace()无法跳转仅刷新该如何解决？

根因说明 #

你的按钮设置了type="submit"属性，点击时会触发默认的表单提交行为，表单提交会直接刷新当前页面，优先级高于你编写的页面跳转逻辑，因此跳转始终没有生效。

排查步骤 #

• 确认点击事件绑定正常：你已经在代码中加了alert(bl)，如果弹窗可以正常弹出且显示的id值符合预期，说明事件绑定逻辑没有问题，问题就出在默认提交行为的拦截上
• 确认跳转地址拼接正确：可以在alert语句后新增console.log("menu.aspx?Pay=" + bl)，打开浏览器开发者工具的控制台，查看输出的跳转地址是否符合预期，排除参数拼接错误的问题
• 排查全局拦截逻辑：如果上述两项都正常，再检查页面是否有其他全局表单提交、页面跳转的拦截代码影响逻辑执行

修复方案（三选一即可） #

方案1：修改按钮类型 #

把按钮的type="submit"改为type="button"，直接取消默认的表单提交行为，修改渲染代码如下：

divNaoPago.InnerHtml += "<td><Button type=\"button\" id=\"" + BL4 + "\" class=\"ola\" style=\"cursor: pointer;\">Pay</Button></td>";

方案2：阻止点击事件的默认行为 #

在点击事件回调中新增e.preventDefault()，主动拦截默认的提交行为，注意要给回调函数补充事件参数e，修改后的jQuery代码如下：

<script>
        $(".ola").click(function (e) {
            e.preventDefault();
            var bl = $(this).attr('id');
            alert(bl);
            window.location.replace("menu.aspx?Pay=" + bl);
        });
</script>

方案3：用return false拦截行为 #

也可以在回调函数末尾新增return false，同时拦截默认行为和事件冒泡，修改后的jQuery代码如下：

<script>
        $(".ola").click(function () {
            var bl = $(this).attr('id');
            alert(bl);
            window.location.replace("menu.aspx?Pay=" + bl);
            return false;
        });
</script>

内容的提问来源于stack exchange，提问作者Miguel Araujo