Question

我正在创建一个类似于Stackoverflow的问题和答案页面，虽然我手写代码，基本上是为了好玩。

我正在写一个在点击时发生的ajax帖子，它会带来一个可以点击的div。 AJAX帖子看起来像这样：

function answerQuestion(){
    $('.answerQuestion').click(function(){
        var user_id = $('#user_id').val();
        var q_id = $('.q_id').val();
        var answer = CKEDITOR.instances.editor1.getData();
        if(answer && q_id && user_id){
            $.post("scripts/questions/answerQuestion.php", {user_id : user_id, q_id : q_id, answer : answer}, function(answerThisQuestion) {
                $('.answerTotalCont').last().css('border-bottom', '1px dashed #444');
                $(answerThisQuestion).hide().appendTo('.allAnswers').slideDown(1000, 'easeOutExpo');
            });
        }
    });
}

当帖子附加数据时，它会引入一个名为“answerAskButton”的可点击div。这个div有可能在你加载时已经在页面上，并且总是在AJAX调用之后加载。

点击此“按钮”会生成不同的AJAX帖子，主要用于评论。这是代码：

function submitComment(noType) {
    //$('.answerAskButton').click(function(){
    $('.answerAskButton').live("click", function(){
        //GET ALL OF THE VARIABLES - THIS CODE IS FUNCTIONING PROPERLY - THIS IS JUST ABRIDGED TO SHOW SMALLER CODE
        $.post("scripts/questions/postComment.php", {details : details, user_id : user_id, q_id : q_id, qora : qora, a_id : a_id}, function(postComment) {
            noComment.slideUp(1000, 'easeOutExpo');
            $(postComment).hide().appendTo(newComment).slideDown(1000, 'easeOutExpo');
            $('.questComment').val(noType);
        });
        $('.questCommentsCont').slideUp(300, 'easeOutCirc');
        $('.questComment').val(noType);
    });
}

这些都是在文档加载时调用的。

问题是：当我发出answerQuestion（）帖子时，在加载AJAX数据并显示一个新的可点击按钮之后，那个按钮（answerAskButton）不再可点击了，但显然onload的其他按钮仍然是工作。

我听说.live（）是解决这个问题的方法，但正如你所看到的那样，它对我不起作用。

任何建议？

UPDATE :: 我已经更新了代码.on（）而不是.live（），尽管它仍然无效。如果您想查看我的代码，Login is here（用户名：公开，密码：公开）和相关网页就是Q＆amp; A中可以找到的Question Pages中的任何一个页。

我们谈论的脚本叫做questions.js，可以通过firebug或元素检查器查看

Answer 1

当您使用jQuery 1.7.x时，请使用 .on() 代替live()：

$(document).on('click', '.answerAskButton', function(){
  // your code
})

因为live()已被弃用。

注意

委托活动的.on()语法：

$(container).on(eventName, target, handlerFunction)

此处，container指向页面加载时属于DOM的Static-element。

完整代码

function submitComment(noType) {
   $(document).on('click', '.answerAskButton', function(){
        //GET ALL OF THE VARIABLES - THIS CODE IS FUNCTIONING PROPERLY - THIS IS JUST ABRIDGED TO SHOW SMALLER CODE
        $.post("scripts/questions/postComment.php", {details : details, user_id : user_id, q_id : q_id, qora : qora, a_id : a_id}, function(postComment) {
            noComment.slideUp(1000, 'easeOutExpo');
            $(postComment).hide().appendTo(newComment).slideDown(1000, 'easeOutExpo');
            $('.questComment').val(noType);
        });
        $('.questCommentsCont').slideUp(300, 'easeOutCirc');
        $('.questComment').val(noType);
    });
}

提示

最好使用其他静态元素代替document进行.on()委派。

在AJAX发布后重新加载jQuery函数或类

1 个答案:

注意

完整代码

提示