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:vik.yaban@gmail.com">vik.yaban@gmail.com</a></p>
              <h4>Employement</h4>
              <br>
              <p><a href="#">vik.yaban@gmail.com</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
    });

})

在提交按钮单击时打开引导成功对话框

1 个答案: