.click（）jQuery函数不起作用

Question

我已经在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'));
        }
    }

我已经在我的jquery文件中写了这个：

$('#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.');
                            }
                        }
                    });});

但是，当我单击并服务器找到用户的信息并将其放入recoveryWindow时，单击功能将不起作用，并且不会将操作的答案发送给用户。 请帮助我，我没有时间

Answer 1

您已使用Ajax在php函数中创建恢复表单。 因此您不能将$('#sendAnswer').click()放在ready函数中。 因为sendAnswer元素在您的HTML中不存在，所以您想在php文件中创建。 因此，您应该在执行ajax之后为此元素编写click函数。 有了这个解释，您的JQuery代码应更改为：

$('#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

如果您的id =“ sendAnswer”的元素是通过ajax加载的，并且您在主页中为此编写了click事件，则必须使用.on（）或.live（）方法来执行它。

但是它们两种方法都用于不同的jQuery版本。

请写如下

$(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
      });

});

Answer 3

救救我，我没有时间

那就是您没有搜索其他相关答案的原因。

无论如何，像stackoverflow中的许多其他答案一样，包括mine，在这里我又去了。

您需要使用on为动态添加的元素委派click事件

$('#recoverWindow').on('click','#sendAnswer',function(){
  ....

代替

$('#sendAnswer').click(function(){