1

我正在制作一个类似于 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) 不再可点击，但是，显然已加载的其他按钮仍在工作。

我听说 .live() 是解决此问题的方法，但正如您所见，它对我不起作用。

有什么建议吗？

更新:: 我更新了代码 .on() 而不是 .live()，尽管它仍然无法正常工作。如果您想查看我的代码，登录在此处（用户名：public，密码：public），相关页面是您可以在问答页面上找到的任何这些问题页面。

我们正在讨论的脚本称为 questions.js，可以通过 firebug 或元素检查器查看

4

1 回答 1

3

当您使用 jQuery 1.7.x 时，不要像这样live()使用.on()：

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

因为live()已被弃用。

笔记

.on()委托事件的语法：

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

这里，container指向Static-element在页面加载时属于 DOM 的一个。

完整代码

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()。

于 2012-06-26T05:42:15.590 回答