.click() jquery function not working - php

Question

I have wrote this code in php:
public function getinfo($username){
$this->autoRender = false;
if($this->request->is('ajax')){
if(!ereg('^[A-Za-z0-9_.]+$',$username)){
echo 'username';
}
else{
$user = $this->User->find('all',array('conditions'=>array('User.username'=>$username)));
if(empty($user)){
echo 'Fail';
}
else{
$this->loadModel('Question');
$question = $this->Question->find('all',array('conditions'=>array('Question.id'=>$user[0]['User']['questionid'])));
echo 'Sec Question : ' . $question[0]['Question']['title'] . '<br />';
echo 'Answer: <input type="text" id="userAnswer" class="loginField" name="data[answer]" /> ';
echo '<input type="submit" id="sendAnswer" class="button" value="send" /> <br />';
echo '<span id="recoverErr"></span>';
$this->Session->write('recoverPass',$user[0]);
}
}
}
else{
$this->redirect(array('controller'=>'message','action'=>'forbidden'));
}
}
And I have wrote this in my jquery file:
$('#send').click(function(){
var recover = $('#recoverUsername').val();
$('#recErr').css('color', 'red');
if(recover == ''){
$('#recoverUsername').focus();
$('#recErr').html('Enter username');
return false;
}
$.ajax({
url: $('#base').html() + '/users/getinfo/'+recover,
type: 'POST',
success: function(data){
if(data.match('username')){
$('#recErr').html('Enter correct username.');
}
else if(data.match('Fail')){
$('#recErr').html("This username doesn't exist");
}
else{
$('#recErr').html('');
$('#recoverWindow').html(data);
$('#recoverWindow').dialog('open');
}
}
});
});
$('#sendAnswer').click(function(){
var answer = $('#userAnswer').val();
$.ajax({
url: $('#base').html() + '/users/getanswer/'+answer,
type: 'POST',
success: function(data){
if(data.match('answer')){
$('#recoverErr').html('Enter answer');
}
else if(data.match('Fail')){
$('#recoverErr').html('answer is false.');
}
else if(data.match('Bad')){
$('#recoverErr').html('fail too send mail.');
}
else{
$('#recoverWindow').html('');
$('#recoverWindow').html('Email was sent, check your spam if it is not in your inbox.');
}
}
});});
but when I click and the server found the User's info and put it in recoverWindow the click function doesn't work and doesn't send the answer to the action.
please Help me, i don't have time

Answer 1

You have used Ajax for creating recover form in your php function. so you can't put $('#sendAnswer').click() in ready function. Because sendAnswer element doesn't exist in your HTML and you want create in your php file.
So you should write click function for this element after ajax execution. With this explanation your JQuery Code should change to this:
$('#send').click(function(){
var recover = $('#recoverUsername').val();
$('#recErr').css('color', 'red');
if(recover == ''){
$('#recoverUsername').focus();
$('#recErr').html('Enter username');
return false;
}
$.ajax({
url: $('#base').html() + '/users/getinfo/'+recover,
type: 'POST',
success: function(data){
if(data.match('username')){
$('#recErr').html('Enter correct username.');
}
else if(data.match('Fail')){
$('#recErr').html("This username doesn't exist");
}
else{
$('#recErr').html('');
$('#recoverWindow').html(data);
$('#recoverWindow').dialog('open');
$('#sendAnswer').click(function(){
var answer = $('#userAnswer').val();
$.ajax({
url: $('#base').html() + '/users/getanswer/'+answer,
type: 'POST',
success: function(data){
if(data.match('answer')){
$('#recoverErr').html('Enter answer');
}
else if(data.match('Fail')){
$('#recoverErr').html('answer is false.');
}
else if(data.match('Bad')){
$('#recoverErr').html('fail too send mail.');
}
else{
$('#recoverWindow').html('');
$('#recoverWindow').html('Email was sent, check your spam if it is not in your inbox.');
}
}
});});
}
}
});});

Answer 2

Help me, i don't have time
thats the reason you didn't search for other related answer..
anyways like many other answers in stackoverflow including mine , here i go again..
you need to delegate click event for dynamically added element using on
$('#recoverWindow').on('click','#sendAnswer',function(){
....
instead of
$('#sendAnswer').click(function(){

Answer 3

If your element with id="sendAnswer" is loading via ajax and you wrote click event for that in your main page then you have to use .on() or .live() method to get it executed.
But they both methods are used for different jQuery versions.
Please write it as following
$(document).ready(function() {
//if you are using jQuery version after 1.7 then use following
$(document).on('click', '#sendAnswer', function(){
//your logic
});
//if you are using jQuery version upto 1.7 then use following
$('#sendAnswer').live('click', function(){
//your logic
});
});