问如何使html <a>标记自动运行

EN

<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal" id="example">Logout</a>

document.getElementById('example').click();

$( document ).ready(function() {
    $(".dropdown-item").trigger( "click" );
});

$("#login").click(function () {
    // Here you would do your check for correct credentials
    // Obviously you wouldn't want to do this in JS in production
    // I'm assuming there would be an AJAX request here that would validate the user's credentials
    // If valid, proceed. If not, call the modal.
    if ($(username).val() !== "blah" || $(password).val() !== "blah") {
  	// Username or password incorrect, show modal
    $("#modal").modal();
  } else {
  	alert("Login successful!");
  }
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


Username: <input id="username" type="text" />
Password: <input id="password" type="password" />
<button type="button" id="login" class="btn btn-info">Login</button>

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
      </div>
      <div class="modal-body">Username or Password is incorrect.</div>
      <div class="modal-footer">
        <a class="btn btn-primary" data-dismiss="modal">Try again</a>
      </div>
    </div>
  </div>
</div>

$("#idOfModal").modal();

$("#idOfModal').modal("hide");