Javascript/Jquery stops working after Ajax call

Question

I have an ajax call that works great the first time the form is submitted after that all javascript on the page seems to break. As well as the form won't submit with ajax again.

Here is my ajax call:

$('form').submit(function(event) {
   $('input:submit').attr("disabled", true).after('<p class="loading">Searching...</p>');

$.ajax({
  type: "POST",
  url: pathname,
  data: $(this).serialize(),
  success: function(data) {
    $('#container').html("<div id='message'></div>");
    $('#message').append(data).hide().fadeIn(1500);
  },
});
event.preventDefault();
});

I'm getting no errors in my console. Any ideas what might be causing this?

Answer 1

I solved the issue, the main page content was changing. Which was causing the javascript to unload. So I need to use Jquery .on/.live and then it works. For what ever reason this worked fine on one server and not on another.

Answer 2

Remove disabled after submitting the form. And remove the , mentioned by @JustinRusso.

$('form').submit(function(event) {
   $('input:submit').attr("disabled", true).after('<p class="loading">Searching...</p>');

    $.ajax({
      type: "POST",
      url: pathname,
      data: $(this).serialize(),
      success: function(data) {
        $('#container').html("<div id='message'></div>");
        $('#message').append(data).hide().fadeIn(1500);
        $('input:submit').removeAttr("disabled");
      }
    });
    event.preventDefault();
});

Answer 3

Use as below: No Need to define event.preventDefault();

$('form').submit(function(event) {
   $('input:submit').attr("disabled", true).after('<p class="loading">Searching...</p>');

    $.ajax({
      type: "POST",
      url: pathname,
      data: $(this).serialize(),
      success: function(data) {
        $('#container').html("<div id='message'></div>");
        $('#message').append(data).hide().fadeIn(1500);
        $('input:submit').removeAttr("disabled");
      },
    });
   return false;
});