我對此提交到通過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的按鈕點擊註冊以前點擊

回答

更新

相關問題