我对此提交到通过value不同的多个按钮的形式。当我点击一个按钮，然后点击第二个按钮，该功能就会对它们进行操作，而不仅仅是第二个按钮。有没有办法来防止这种行为？jQuery的按钮点击注册以前点击

这与我在这里问的问题有些相关：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>

来源

2015-06-19 wxcoder

为什么你在点击处理程序中有提交处理程序？一个'submit'处理程序就足够了;因为你已经有'button type =“submit”' –

@ShaunakD当我使用提交处理程序时，它会返回所有按钮的列表，而不是我单击的按钮。见第二段。的 – wxcoder

可能重复[jQuery的：如何让哪个按钮是在表单提交点击]（http://stackoverflow.com/questions/5721724/jquery-how-to-get-which-button-was-clicked-upon-表单提交） – lshettyl

您需要防止的形式从用户点击按钮之前提交。

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

    });

来源

2015-06-19 16:27:19 GreeKatrina

单击按钮时将返回按钮值和'none'。 – wxcoder

当你说退货，你的意思是'console.log（）'把按钮的价值？或者'create_post（）'函数返回值？它怎么没有返回？作为一个字符串，还是你的意思是“未定义”？ – GreeKatrina

从我记得（我已经改变了代码）以来，console.log（）输出我的值将首先返回按钮值和第二个值'None'。您更新的答案有效。 – wxcoder

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

防止这种情况，最好的办法是将这个

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

您的按钮单击事件之外。

来源

2015-06-19 16:24:52 lucasnadalutti

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

回答

更新

相关问题