Jquery ajax php only working once

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.

its better if u can put this in a jsfiddle – Swarne27 Apr 01 '13 at 04:09 — Swarne27, Apr 01 '13 at 04:09

score 5 · Accepted Answer · edited Apr 01 '13 at 05:13

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");
            }
        });
    });

Dipesh Parmar · Answer 2 · 2013-04-01T05:47:55.457

2

Use .on().

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

edited Apr 01 '13 at 05:47

answered Apr 01 '13 at 04:10

Dipesh Parmar

27,090
8
61
90

There is no difference between the `on('click')` and `click`. – Ram Apr 01 '13 at 04:30
@undefined i am afraid bro but there is....`on('click')` word as delegate and work on dynamically loaded content. – Dipesh Parmar Apr 01 '13 at 04:32
No, this not how `on` is used for event delegation, it's just a regular handler. – Ram Apr 01 '13 at 05:38
@undefined as far as i know its behave like i said....if i am wrong please correct me so i will not make mistake in future – Dipesh Parmar Apr 01 '13 at 05:40
`$('#staticElement').on('click', '.dynamicallyGeneratedElement', function(){})` – Ram Apr 01 '13 at 05:41
@undefined yes thats right....`$(document).on('click','button#submit')` will work right..?? – Dipesh Parmar Apr 01 '13 at 05:47

score -1 · Answer 3 · edited May 23 '17 at 12:21

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

Jquery ajax php only working once

3 Answers3