jquery - 带有多个按钮的 HTML 表单 - 不调用 Jquery 函数

Question

我在 HTML 中有以下表格

<form id="test" name="test">
<button id="save" class="small"><i class="icon-plus"></i>save</button>  //KickStart
<button id="edit" class="small"><i class="icon-plus"></i>edit</button>
 <input value=1 type="text" name=Col1 class="Hide">
 <input value=2 type="text" name=Col2 class="Hide">

</form>

单击按钮时要调用的 JQuery 函数

$(document).on("click", "#edit", function (e) {

    return false;
});

但是当我点击编辑按钮表单提交并且没有按预期调用 Jquery 函数时。

也许我错过了表单的一些属性？

Answer 1

在将事件绑定到任何元素之前，您必须等待 DOM 准备好。

你所要做的就是把你的代码放在一个

$(document).ready(function(){
    $(document).on("click", "#edit", function (e) {
        return false;
    });
});

Answer 2

如果标题中有以下代码，则需要使用$(function(){}).This will run code after load page。

$(function(){
  $("#edit").click(function (e) {
    alert("a");
    return false;
  });
});

Answer 3

尝试这个，

$(document).ready(function(){
     $("#edit").click(function(e) {
         alert("edit button clicked!");
         return false;
     });
});

Answer 4

另一种解决方案是使用 preventDefault() 函数：

$(document).on("click", "#edit", function (e) {
    alert("Hi");
    e.preventDefault();
});

请参阅http://jsfiddle.net/AbP8Z/和http://api.jquery.com/event.preventDefault