电子邮件以递增方式发送多次单击电子邮件按钮。使用AJAX和Boostrap Modal

时间:2016-03-15 20:40:14

标签: jquery ajax twitter-bootstrap-3

我通过Ajax在bootstrap模式中发送电子邮件。一旦发送一次,单击按钮时。但如果您点击之后,它会发送两次电子邮件。然后,如果您第三次单击它,它会发送三次电子邮件。知道为什么会这样吗?

HTML:

 <div class="modal fade" id="EmailModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="exampleModalLabel">New message</h4>
         </div>
         <div class="modal-body">
           <form>
             <div class="form-group">
              <label for="recipient-name" class="control-label">Recipient:</label>
              <input type="text" class="form-control" id="recipient-name">
         </div>
         <div class="form-group">
           <label for="message-text" class="control-label">Message:</label>
           <textarea class="form-control" id="message"></textarea>
         </div>
         </form>
        </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" id="close" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary" id="send">Send message</button>
    </div>
   </div>
  </div>
 </div>

Jquery的:

     $('#EmailModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('email')
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
  keyboard: true;///Allows escape button to close modal
  console.log("popup");

      ////send e-mail to PHP script
      $("#send").click(function(){
        message =  $('textarea#message').val();

        $.ajax({
          url:"send_email_lecture.php", 
          type: "POST", 
          data : {"message" : message, 
              "email" : recipient
              },
          dataType: "HTML", 
          success : function(email){ 
          console.log("email sent");
          $('#EmailModal').modal('hide');
          $('#EmailSent').modal('show');
          $('textarea#message').val('')
          },
          fail : function(email) { 
            console.info("fail"); 
          }
        })
      });
 });

0 个答案:

没有答案