jQuery - 停止页面重新加载

Question

我有一个在 Lightbox 中显示的 Textbox 和 Button（下一个和上一个）。 目前，当我点击回车键时，页面会重新加载。 我不想让这种情况发生。

我想要的是，当我点击回车键时，位于 lightbox 后面的“下一个”按钮应该被点击，而不会重新加载页面。

我使用了以下代码，但是同时发生了reload和Next按钮的click：

$("input").bind('keyup', function(event){
    if(event.keyCode == 13){
        $("#nextbtn").trigger('click');
    }
    event.preventDefault();
    return false;
});

- lamrin

---

请查看以下帖子：https://dev59.com/-XVC5IYBdhLWcg3w4VX6 - sathish

Answer 1

确保您的输入按钮是类型为button而不是submit

<input type='button'>

如果按键码是13，则调用下一个按钮的单击事件，然后将其设置为false，这样就不会返回加载。

$("input").bind('keyup', function(event){ 
  if(event.keyCode == 13){ 
      $("#nextbtn").click(); 
      return false;
  }
});

- Gerard Banasig

Answer 2

在你触发下一个按钮时，将 "return false" 语句放在最前面，如下所示：

$("input").bind('keyup', function(event){ 
    if(event.keyCode == 13){ 
        $("#nextbtn").trigger('click');
        return false; 
    } 
    event.preventDefault(); 
});

- Rajeev Ranjan Lal

Answer 3

如果我理解正确的话，我认为你只需要调整你的灯箱设置来使用一个iFrame。如果你只是使用标准的DOM元素，表单提交将会触发页面加载。解决这个问题的另一种方法是使用jquery.form插件进行AJAX表单提交。

- BBonifield

Answer 4

问题出在其他地方。据我所知，页面正在重新加载，因为按钮在表单中，浏览器将其视为提交按钮。请注意，这发生在click事件上，而不是keyup事件上。你可以做两件事：

第一，将click事件分配给返回false的按钮。 第二，将你的输入事件更改为keypress，而不是keyup，并添加一行：e.stopPropagation()。

- Flash Thunder