jQuery按钮单击注册以前的单击

Question

我有一个表单，其中包含多个按value提交的按钮。 单击一个按钮，然后单击第二个按钮后，该功能将同时对它们进行操作，而不仅仅是第二个按钮。 有没有办法防止这种行为？

这与我在这里提出的一个问题有关： 为什么功能仅在第二次点击时起作用？ 但是如果有多个按钮，则该解决方案无效，因为它只是注册按钮列表中的第一个按钮。

JS：

$(document).ready(function () {
    $(':button').click(function (){
        var myval = $(this).attr("value");


        $('#post-form').on('submit', function(event) {
            event.preventDefault();
            console.log("form submitted!");
            console.log(myval);
            //var cbtn = $("button");
            //var btnval = cbtn.val();
            //console.log(cbtn);
            document.getElementById('gbimg').style.display = 'none';
            document.getElementById('rgimg').style.display = 'none';
            create_post(myval);

        });

    });


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

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>

Answer 1

这里发生的是，单击第二个按钮时，您将第二次将Submit事件绑定到#post-form ，因为绑定发生在按钮click事件回调内。

防止这种情况的最好方法是移动它

$('#post-form').on('submit', function(event) {
            ...
});

在您的按钮点击事件之外。

Answer 2

您需要阻止表单在用户单击按钮之前提交。

$(document).ready(function () {
    $('#post-form').on('submit', function(event, myval) {
        event.preventDefault();
        console.log("form submitted!");
        console.log(myval);
        //var cbtn = $("button");
        //var btnval = cbtn.val();
        //console.log(cbtn);
        document.getElementById('gbimg').style.display = 'none';
        document.getElementById('rgimg').style.display = 'none';
        create_post(myval);
    });
    $(':button').click(function (){
        var myval = $(this).attr("value");
        $('#post-form').trigger('submit', myval);

    });

更新资料

抱歉，我认为这段代码应该可行。 上面的代码将运行两次，因为单击按钮也将被视为表单提交。

$(document).ready(function () {
    $('#post-form').on('submit', function(event) {
        event.preventDefault();
    });
    $(':button').click(function (){
        var myval = $(this).attr("value");
        console.log("form submitted!");
        console.log(myval);
        //var cbtn = $("button");
        //var btnval = cbtn.val();
        //console.log(cbtn);
        document.getElementById('gbimg').style.display = 'none';
        document.getElementById('rgimg').style.display = 'none';
        create_post(myval);

    });