更新

Question

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

这与我在这里提出的问题有点相关：Why does function only work on second click?但如果有多个按钮，解决方案无效，因为它只是从按钮列表中注册第一个按钮。

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

这里发生的是当你点击第二个按钮时，你第二次将提交事件绑定到#post-form，因为绑定发生在按钮点击事件回调中。

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

$('#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);

    });

单击jQuery按钮注册之前的点击

2 个答案:

更新