PHPMailer multiple sending mail

Question

Im using pop3 php mailler and ajax. There is no problem for sending mail but when I press sent mail button it incease number of mails. So whats the problem

my ajax code :

$("button").click(function(e){
 $('.alert').slideUp(100);
  e.preventDefault();
  var dataArray = $("form").serialize();
  $.ajax({
   type: "POST",
   url: "include/login.php",
   dataType: "json",
   data: dataArray,
   success: function (data) {
    if(data.result == "true"){
     $('.alert').removeClass('alert-danger').addClass('alert-success').slideDown(200);
      $('.alert strong').html("hello "+data.name);
        setTimeout(function(){ 
        window.location.replace("<?php if(isset($_SERVER['HTTP_REFERER'])) { echo "$_SERVER[HTTP_REFERER]";}else{echo "index.php";} ?>"); 
      }, 1200);
     }else if(data.result == "false"){
     $('.alert').removeClass('alert-success').addClass('alert-danger').slideDown(200);
     $('.alert strong').html(data.name);
     }else if(data.result == "warning"){
         $('.alert').removeClass('alert-warning').addClass('alert-danger').slideDown(200);
         $('.alert strong').html(data.name);
         /// send mail button click 
             $('body').on('click','#activation',function(e){
              e.preventDefault();
              $.ajax({
                  beforeSend:function(){
                       $('.alert strong').html("sending mail..");    
                  },
                  url:"include/activation_mail.php",
                  type:"post",
                  data:{u_id:data.userid,u_pass:data.u_pass},
                  success:function(msj){
                     $('.alert').removeClass('alert-danger').addClass('alert-success').slideDown(200);
                     setTimeout(function(){
                     $('.alert strong').html(msj);    
                  },1000);
                 },
                });
              });
             }
            },
          });
      });

mailing php :

$sql = "UPDATE users SET u_activation_code = '$activation_code' WHERE u_id = '$u_id'";
    $query = mysqli_query($con,$sql);
    if($query){
        $sql="SELECT * FROM users WHERE u_id='$u_id'";
        $query = mysqli_query($con,$sql);
        $row = mysqli_fetch_row($query);
        $id = $row[0];
        $name = $row[1];
        $surname = $row[2];
        $fullname = "$row[1] $row[2]";
        $username = $row[5];
        $email = $row[6];
        $icerik = "aktivasyon maili <a href=''>activation</a>";

        $mail = new PHPMailer();
        $mail->CharSet='utf-8';
        $mail->setFrom('fragman@aktivasyon', 'Aktivasyon');
        $mail->addReplyTo('mymail@gmail.com', 'activation');
        $mail->addAddress($email,$fullname);
        $mail->Subject = 'activation link';
        $mail->AltBody = 'This is a plain-text message body';
        $mail->Body = "click active <a href=''>clicked</a> ";


        //send the message, check for errors
        if (!$mail->send()) {
            echo "error sending: " . $mail->ErrorInfo;
        } else {
            echo "send mail";
        }
    }else{
        echo "error query";
    }

where is problem ?

Answer 1

Because of this line:

$('body').on('click','#activation',function(e){

On every click on a button, you're binding another click event to #activation making it run multiple times on every click on that button. You should bind the click event ONCE.

You could also do:

$('body').off('click','#activation');

And then bind the click event again, to prevent it from happening.

EDIT

You're binding a click event for every BUTTON element existing in the DOM:

$("button").click(function(e){

I also suggest that you specify this event to a button with unique ID, and not for every button. Because when you click on the #activation button, it will ALSO trigger the call to the login ajax (Since it's also a button element)

What you should do is to add an ID attribute to the button that when you click on trigger the login ajax:

<button id="login-btn">Log In</button>

And then, change the above binding to:

$("#login-btn").click(function(e){ // INSTEAD OF THE CURRENT $("button").click(function(e){