event.preventDefault阻止Ajax调用
我一直试图让ajax调用在由onclick事件触发的函数内部工作。 当我使用event.preventDefault页面不会重新加载，但ajax调用不起作用，没有数据被添加到我的数据库。 当我注释掉该行时，该页面将被重新加载，但其他所有功能都可以使用。
function clickFunction(elem) {
var var1 = elem.id;
var var2 = var1.split("_");
// elem.preventDefault();
if (var2[0] == "Add") {
if (var2[1] == "Calls") {
console.log("Calls");
console.log(var1);
event.preventDefault();
var data = $(this).serialize();
$.post('progressSheetDynamic', data).done(function (response){
$(".1").html(parseInt($('.1').html(), 10)+1);
Calls.update(50);
});
}
}
}
Html代码
<form action="{{ route("progressSheetDynamic") }}" method="post" id= {{ $addID }}>
<input name="increment" value="increment" type="hidden"> </input>
<input type="hidden" name="id" value= {{$activities}} >
<button type="submit" class="styleHover styleButton" onclick="clickFunction(this)" id= {{ 'Add_'.$newText }}> + </button>
</form>
我检查了日志，函数进入if语句。 我也尝试使用按钮单击事件的preventDefault，通过做elem.preventDefault（）; 但这不起作用。 也不使用返回false。
这个问题似乎与这一行有关：
var data = $(this).serialize();
它应该是这个，而不是：
var data = $(elem.form).serialize();
函数中的this值是对window对象的引用，而elem是button所以elem.form将是序列化的形式（假设这是你想要的数据）。
正如注释中所指出的那样， event在一些浏览器中仅被定义为全局变量，因此您需要在属性中传递event并在函数中接收它以确保安全。
属性：
onclick="clickFunction(this, event)"
功能：
function clickFunction(elem, event) {
// ...
}
请注意，IE8及更低版本没有event.preventDefault() ，但您可以设置event.returnValue = false 。
event不会被定义，因为yuo没有通过它。 你用onclick="clickFunction(this)传递按钮。
将其更改为onclick="clickFunction(event)" 。
然后更改函数声明：
function clickFunction(event) {
console.log(event)
...
}
如果你想要按钮和事件，看看我有什么：
<button type="submit" class="styleHover styleButton" onclick="clickFunction(event, this);" />
<script>
function clickFunction(event, elem) {
console.log(event);
console.log(elem);
event.preventDefault();
}
</script>
当你将this按钮传递给clickFunction(this)时Elem会引用这个按钮，
但是按钮没有一个preventDefault()函数，因此你会得到一个Uncaught TypeError: elem.preventDefault is not a function
其次，$（this）是引用窗口，应该是$（elem.form）。
下面是我如何解决你原来的问题，而不改变你的结构。
HTML：（若没有通过this在clickFunction ）
<button type="submit" class="styleHover styleButton" onclick="clickFunction()" id= {{ 'Add_'.$newText }}> + </button>
Javascript：（使用event.target for elem，$（elem.form）for $（this））
function clickFunction(event) {
var elem = event.target; // event.target will be equivalent to your elem
var var1 = elem.id;
var var2 = var1.split("_");
event.preventDefault();
if (var2[0] == "Add") {
if (var2[1] == "Calls") {
console.log("Calls");
console.log(var1);
event.preventDefault();
var data = $(elem.form).serialize(); // should be elem.form here to get correct data
$.post('progressSheetDynamic', data).done(function (response){
$(".1").html(parseInt($('.1').html(), 10)+1);
Calls.update(50);
});
}
}
}