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

Answer 2

该按钮将触发表单提交。表单提交将重新加载页面。要防止这种情况，请调用preventDefault（）。

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