jQuery点击事件触发页面刷新问题求助

嘿，我一眼就发现问题所在了——你的jQuery事件绑定语法出了错误，这才导致preventDefault()和return false完全没起作用！

错误原因 #

你看这段代码：

$('#btn-add-item').on('click'), function(e) { 
  e.preventDefault(); 
  alert("works"); 
  return false; 
}

这里的逗号位置写错了！on()方法的第二个参数（回调函数）应该放在方法的括号内部，而不是外面。你现在的写法相当于只给on()传了'click'一个参数，后面的函数根本没有被绑定到点击事件上。所以点击按钮时，你的自定义逻辑完全没触发，按钮的默认行为（如果它在<form>标签里的话，会触发表单提交导致页面刷新）就直接执行了。

修正后的代码 #

把逗号移到on()方法的括号里，正确的写法是这样的：

$(function() { 
  $('#btn-add-item').on('click', function(e) { 
    e.preventDefault(); 
    alert("works"); 
    return false; 
  }); 
});

如果这个按钮确实在表单里，除了修正语法，还可以给按钮加上type="button"属性，明确它不是提交按钮，从根源避免默认提交行为：

<button type="button" class="btn btn-primary btn-sm" id="btn-add-item"><i class="fa fa-plus"></i> Add item</button>

这样修改后，点击按钮就会触发你的自定义逻辑，不会再刷新页面啦！

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