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() がこれを修正する方法だと聞きましたが、ご覧のとおり、うまくいきません。

何かアドバイス？

更新:: .live() の代わりにコード .on() を更新しましたが、まだ機能していません。私のコードをご覧になりたい場合は、ログインはこちら(ユーザー名: public、パスワード: public) で、問題のページは Q&A ページで見つけることができるこれらの質問ページのいずれかです。

私たちが話しているスクリプトは question.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)

ここでは、ページ読み込み時に DOM に属する をcontainer指します。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()

于 2012-06-26T05:42:15.590 に答える