jquery only gets executed 1 time

Question

Hello guys,

I have a function in jquery that looks like this.

    function interceptFilter(e){
  $.ajax({
  type: "POST",
  data: $('#formContent form').serialize(),
  url: "index.php?page=filter",
  timeout: '3000',
  error: function(XMLHttpRequest, textStatus, errorThrown){
   alert('Error loading HTML document: ' + textStatus + ' - ' +
    errorThrown);
  },
  success: function(data, textStatus){
   var dagFilter = $('#filterDag :selected').text();
   var zaalFilter = $('#filterZaal :selected').text();
   var genreFilter = $('#filterGenre :selected').text();
   $('#formContent>form').remove();
   $('#formContent').html(data);
   $('#filterDag').val(dagFilter);
   $('#filterZaal').val(zaalFilter);
   $('#filterGenre').val(genreFilter);
  }
 });
 return false;
 }

Its a form that i'm deleting and reloading, the function gets callen when a selectbox is selected but the problem is that it only works 1 time, when the form is readded then the handlers are gone.

anyone know how i can fix this?

Answer 1

Try using .live() to attach the handlers.