為什么功能僅在第二次點擊時起作用？

Question

我正在嘗試通過表單提交數據，當單擊“提交”按鈕時，我希望某些圖像通過style.display = 'none';消失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>

JS：

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

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

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

Answer 1

如果您的<button>執行表單的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 : 
};

Answer 2

將按鈕單擊處理程序移到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 : 
    };
});