调用 JQuery 并且不回发的 Html 按钮答案

【问题标题】：Html Button that calls JQuery and does not post back调用 JQuery 并且不回发的 Html 按钮
【发布时间】：2010-11-15 04:02:02
【问题描述】：

是否可以有一个不回传到服务器的按钮，并且点击事件可以被jquery检测到？我有一个 MVC 页面需要一段时间来加载和访问数据库，我只是想减少所需的加载次数和数据库命中。

【问题讨论】：

标签： jquery html

【解决方案1】：

您可以使用 jQuery 附加任何您想要的行为。

这是你的按钮

<button class="my-button">click this</button>

这是你的 jQuery

$("button.my-button").click(function(){
  // do something!
});

如果您想使用表单上的提交按钮，这里有一个更不显眼的方式：

$("#some-form input:submit").click(function(){
  // do something special!

  // prevent default behavior of button
  return false;
});

【讨论】：

【解决方案2】：

只需将按钮设为常规按钮而不是 submit 按钮，然后执行以下操作：

$("#myButton").click(function () {
    whatever it is I want to do ...
});

【讨论】：

【解决方案3】：

如果您使用<input type="submit"> 创建按钮，它会将表单提交到服务器；但是如果你使用<input type="button">，它不会，你可以检测到onclick事件

【讨论】：

【解决方案4】：

您可以使用 jquery 检测按钮的点击事件。

给那个按钮加上id，在点击事件上用那个id调用函数。

$('#buttonid').click(function() {
// call ajax here

.post()  // ajax call

or

.get()   // ajax call


});

Jquery ajax 的组合。

【讨论】：