Почему функция работает только во втором клике?

Question

Я пытаюсь отправить данные через форму и, когда нажата кнопка отправки, я хочу, чтобы определенные изображения исчезали с 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 : 
    }; 
});