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，我建议使用以下代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我建议您更改代码以使用jquery来处理提交按钮单击事件。它适用于所有浏览器

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用jQuery检测单击了哪个提交按钮

2 个答案: