jQuery Ajax PHP只工作一次

Question

I have the following jQuery

        $("button#submit").click(function(){
            $.ajax({
                type: "POST",
                url: "process.php",
                data: $('form.contact').serialize(),
              success: function(msg){
                $("#form-content").modal('hide');                     
                $("#thanks").html(msg);
                $("#thanks").delay(2000).fadeOut("slow");
              },
                error: function(){
                    alert("failure");
                }
            });
        });

And Php

<?php
    if (isset($_POST['name'])) {
    $name = strip_tags($_POST['name']);
    $email = strip_tags($_POST['Email']);
    $sug = strip_tags($_POST['sug']);

    echo "<span class='label label-info'>Your Website has been submitted .. Thank you</span>";
}?>

This works the first time and displays the php echo on my page. But when I submit the form again it does not show.

Answer 1

Your $("#thanks") dom is hidden.

    $("button#submit").click(function(){
        $.ajax({
            type: "POST",
            url: "process.php",
            data: $('form.contact').serialize(),
          success: function(msg){
            $("#form-content").modal('hide');                     
            $("#thanks").html(msg);
            $("#thanks").show();  <----------------ADD THIS
            $("#thanks").delay(2000).fadeOut("slow");
          },
            error: function(){
                alert("failure");
            }
        });
    });

Answer 2

使用.on() 。

$(document).on('click','button#submit',function(){  })

Answer 3

use like this

$("button#submit").live('click', function(e) {
  $.ajax({
            type: "POST",
            url: "process.php",
            data: $('form.contact').serialize(),
          success: function(msg){
            $("#form-content").modal('hide');                     
            $("#thanks").html(msg);
            $("#thanks").delay(2000).fadeOut("slow");
          },
            error: function(){
                alert("failure");
            }
        });
    });

check difference here .live and .on jQuery .live() vs .on() method for adding a click event after loading dynamic html