I thought I had this sorted on another website but just can't resolve the problem now.

I have a link that when clicked shows a form. The form is submitted through jquery ajax, runs the PHP and updates the html in a div on success. All fine.

However, after the ajax call the click functions stop working and I cannot work out why. The html and form are (in short, and the action of the form is retained in case the user has javascript disabled):

<p><a href="#" id="forgot-username">Forgotten Username</a></p>
<div id="forgot-login">
  <form name="get-username" id="get-username" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <input type="hidden" name="to_do" value="Get Username">
    <label for="email">Email</label>
    <input type="email" id="email" class="required" name="email" value="<?php if(isset($_POST['email'])) { echo $_POST['email']; } ?>">
    <input type="submit" value="Get Username">

The jquery and ajax is:

$('#forgot-username').on('click', function(e){

  var dataString = $(this).serialize();

    type: "POST",
    url: "login-logout.php",
    data: dataString,

    success: function(data){
      // bindBehaviours(); 

  return false;

The bindbehaviour function call is also something I have tried, by wrapping the click events in this function and trying to trigger it on ajax success.

I have also tried chaning the .on('click'.... to have a second parameter to reference the id and/or link (I have tried various ways) but that stops the event handler working at all.

EDIT: I have just re-loaded the page, clicked on the link, closed the form again and when I click the link again, nithing happens so this doesn't appear to be an issue with the ajax call.

Can anyone help please?

Edited by simplypixie

4 Years
Discussion Span
Last Post by simplypixie
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.