javascript - 通过 JavaScript 单击消防按钮

Question

当用户单击另一个按钮时，我需要使用 JavaScript“单击”一个按钮。

在 Mac 上的 Chrome 中，以下内容运行良好。但是，在 Mac 上的 Safari 中，单击该按钮只会重新加载当前页面，而不是触发预期的行为。

JS

$( 'document' ).ready( function() {
    var $myForm = $('#my-form');
    $('#button-fake').on('click', function(){
        console.log("FAKE CLICKED");
        if ($myForm[0].checkValidity()){
            console.log("FORM VALID");
            $('#button-real').click();
            console.log("FORM SUBMITTED");
        }
    });              
});

HTML

<input type="submit" id="button-fake" value="Fake button" />

<input type="submit" id="button-real" value="Real button" />

PS:这不是我的想法，我只是需要让它发挥作用。

Answer 1

您可能需要添加e.preventDefault();

var $myForm = $('#my-form');
$('#button-fake').on('click', function(e) {
  e.preventDefault();
  console.log("FAKE CLICKED");
  if ($myForm[0].checkValidity()) {
    console.log("FORM VALID");
    $('#button-real').click();
    console.log("FORM SUBMITTED");
  }
});

$('#button-real').on('click', function(e) {
  console.log('button-real clicked')

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='my-form'>
  <input type='text' required>
  <button type='submit' id='button-fake'>Submit</button>
  <button type='button' id='button-real'>Real</button>

</form>