单击提交按钮打开引导程序成功对话框

Question

作为一个伪通知，我希望在单击提交按钮时弹出一个成功对话框。我使用了SO上的一个脚本，但由于某种原因，它仍然不起作用。我已经尝试过将脚本声明为function myFunction()并在action="myFunction()中调用它，但它仍然不起作用。

我的html:

<!-- HTML of contact form -->
    <section id="contact">
        <div class="inner">
          <h2>Drop me a line. <i class="title_line"></i> </h2>
          <p class="lead"> Don't hesitate to send me an email.<br>
            I’d love to hear from you! </p>
          <div class="row">
            <div class="col1">
              <form name="htmlform" method="post" action="" dir="ltr" lang="en" class="">
                <label>Name<span class="required">*</span></label>
                <input type="text" name="first_name" placeholder="Your Name" required>
                <label>Email<span class="required">*</span></label>
                <input type="email" name="email" placeholder="E-Mail" required>
                <label>Message<span class="required">*</span></label>
                <textarea name="comments" cols="1" rows="5" placeholder="Tell me everything" required></textarea>
                <button name="send" id="emailsend" type="submit" lang="en" class="submit">Send</button>
              </form>
                  <div id="le-alert" class="alert alert-success fade">
                    <button href="#" type="button" class="close">&times;</button>
                    <h4>Alert title</h4>
                    <p>Roses are red, violets are blue...</p>
                  </div>
            </div>
            <div class="col2">
              <h4>Meet Me</h4>
              <br>
              <p>1234 SE 42nd St.</p>
              <p>Mercer Island, WA </p>
              <p>USA </p>
              <h4>My Email</h4>
              <br>
              <p><a href="mailto:[e-mail]">[e-mail]</a></p>
              <h4>Employement</h4>
              <br>
              <p><a href="#">[e-mail]</a></p>
            </div>
          </div>
        </div>
        <div id="success-alert" class="alert alert-success fade">
        <button class="close" type="button" data-dismiss="alert"></button>
         <h4 class="alert-heading">Success!</h4>
        <p>Email Sent!</p>
    </div>
      </section>
     <!-- End Contact Form -->
    <!-- Javascript to make the dialog -->
        <script type="text/javascript">$('#emailsend').click(function () {
      $('#success-alert').addClass('in'); // shows alert with Bootstrap CSS3 implementation
    });
    $('.close').click(function () {
      $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implementation
    });</script>
<!-- End Javascript -->

Answer 1

您可以在document.ready函数中尝试jquery代码。

$(document).ready(function(){
    $('#emailsend').click(function () {
      $('#success-alert').addClass('in'); // shows alert with Bootstrap CSS3 implementation
    });
    $('.close').click(function () {
      $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implementation
    });
})