Javascript 为什么该函数只在第二次单击时起作用？

我试图通过表单提交数据，当“提交”按钮按下时，我希望某些图像消失，并显示

style.display='none'。目前，在图像消失之前，我必须点击按钮两次。有没有一种方法可以在第一次单击时执行此操作

HTML:

<form action="/create_post/" method="POST" id="post-form">
    <div class="col-sm-4" id="toprow">
        <h4 style="font-family:verdana"> Models </h4>
        <img src='{% static 'images/USAcomplete2.png' %}' class="img-responsive thumbnail" id='gbimg' >
        <div class="btn-toolbar">
            <button type="submit" name="model" value="test" class="btn btn-default">test</button>
            <button type="submit" name="model" value="test2" class="btn btn-default">test2</button>
            <button type="submit" name="model" value="test3" class="btn btn-default">test3</button>
        </div>
    </div>
</form>

将按钮单击处理程序移到create_post函数之外：

$(document).ready(function () {
    $('#post-form').on('submit', function(event) {
        event.preventDefault();
        console.log("form submitted!")
        create_post();
    });

    function create_post() {
        console.log("create post is working!");
        var cbtn = $("button");
        var btnval = cbtn.val();
        console.log(btnval);
        document.getElementById('gbimg').style.display = 'none';

        //$.ajax({
        //    url : "create_post/",
        //    type : "POST",
        //    data : { model : 
    };
});

如果您的
执行表单的
submit
功能，您应该在表单提交时取消按钮，而不是在
create_post（）
方法中添加单击处理程序。因此：

$('#post-form').on('submit', function(event) {
    event.preventDefault();
    console.log("form submitted!");

    var cbtn = $("button");
    var btnval = cbtn.val();
    console.log(btnval);
    document.getElementById('gbimg').style.display = 'none';

    create_post();
});

function create_post() {
    console.log("create post is working!");

    //$.ajax({
    //    url : "create_post/",
    //    type : "POST",
    //    data : { model : 
};

我应该说得更具体些。我只在向表单提交时才查找此行为，因此页面上的所有按钮都不会受到影响。请编辑、删除单击处理程序并将代码移动到“创建帖子”函数中。如果有多个按钮的类型为
type=submit
，但它们的值不同，该怎么办？当我在服务器端处理请求时，请求似乎只保留第一个按钮。我使用的是Django。检查一下，这个问题似乎是在服务器端出现之前我做了一个
控制台。当我单击第二个和第三个按钮并返回第一个按钮的值时（在ajax请求之前），我记录了按钮值的
日志（）
。嗯，即使您用唯一的
名称=
？是的。也许代码抓住了它看到的第一个按钮，而不是实际单击的按钮？
$('#post-form').on('submit', function(event) {
    event.preventDefault();
    console.log("form submitted!");

    var cbtn = $("button");
    var btnval = cbtn.val();
    console.log(btnval);
    document.getElementById('gbimg').style.display = 'none';

    create_post();
});

function create_post() {
    console.log("create post is working!");

    //$.ajax({
    //    url : "create_post/",
    //    type : "POST",
    //    data : { model : 
};