Question

我一直试图让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（）;但这不起作用。也没有使用return false。

Answer 1

问题似乎与这一行有关：

00.4991018 sec
10.3393635 sec,

应该是这样：

var data = $(this).serialize();

您的函数中的var data = $(elem.form).serialize();值将是对this对象的引用，而window是elem，因此button将成为elem.form的形式序列化（假设这是你想要的数据）。

正如评论中所述，event仅在某些浏览器中被定义为全局变量，因此您需要在属性中传递event并在函数中接收它才能安全。< / p>

属性：

onclick="clickFunction(this, event)"

功能：

function clickFunction(elem, event) {
  // ...
}

请注意，IE8及更低版本没有event.preventDefault()，但您可以设置event.returnValue = false。

Answer 2

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>

Answer 3

当您将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);

            });
        }
    }
}

event.preventDefault阻止ajax调用

3 个答案: