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">
</form>
</div>
The jquery and ajax is:
$('#forgot-username').on('click', function(e){
e.preventDefault();
$('#forgot-login').toggle();
});
$("#get-username").submit(function(e){
e.preventDefault();
var dataString = $(this).serialize();
$.ajax({
type: "POST",
url: "login-logout.php",
data: dataString,
success: function(data){
$('.success-notice').html('<p>'+data+'</p>');
// 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?