使用jQuery來檢測其提交按鈕被點擊

Question

具有以下形式：

<form id="my_form"> 
    <input type="submit" value="Save" id="my_form_save"/> 
    <input type="submit" value="Save and apply" id="my_form_save_apply"/> 
</form> 

和下面的jQuery代碼：

$('#my_form').submit(function(e) { 
    e.preventDefault(); 
    var clicked_button = e.originalEvent.explicitOriginalTarget.id; 
    console.log(clicked_button) 
}); 

我想知道如何檢測其兩個按鈕被點擊。

上面的代碼會引發此錯誤：Uncaught TypeError: Cannot read property 'id' of undefined。

此外，我發現e.originalEvent.explicitOriginalTarget.id不適用於所有瀏覽器，所以我需要另一種解決方案。

Answer 1

我建議你改變你的代碼來使用jquery來處理提交按鈕的點擊事件。它會在所有的瀏覽器

var buttonClicked = ""; 
 
$('#my_form').submit(function(e) { 
 
    e.preventDefault(); 
 
    alert(buttonClicked); 
 
    buttonClicked=""; 
 
}); 
 
$("#my_form input[type = 'submit']").click(function(e){ 
 
buttonClicked = $(this).attr("id"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><form id="my_form"> 
 
    <input type="submit" value="Save" id="my_form_save"/> 
 
    <input type="submit" value="Save and apply" id="my_form_save_apply"/> 
 
</form>

Answer 2

工作，正如你已經使用jQuery我建議以下代碼：

$(document).on('click', 'input', function(e){ 
 
    e.preventDefault(); 
 
    var targetID = $(e.target).attr('id'); 
 
    if (targetID === 'my_form_save') { 
 
    console.log('Save was clicked'); 
 
    } else if (targetID === 'my_form_save_apply') { 
 
    console.log('Save and apply was clicked'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="my_form"> 
 
    <input type="submit" value="Save" id="my_form_save"/> 
 
    <input type="submit" value="Save and apply" id="my_form_save_apply"/> 
 
</form>