1

新しいjQueryクリック関数を追加すると、既存のAJAX呼び出しが正しく機能しなくなる理由を特定するのに苦労しています（注：新しい関数の追加を原因として再確認し、切り分けました）。

状況のコンテキストは、ユーザーに文章題を与え、ユーザーの応答の時間を計り、AJAX呼び出しを使用してユーザーの回答を処理し、追加の提案された回答を表示するページがあることです。この機能はすべて機能します。ただし、ユーザーがスタートボタンをクリックするまで（ページが読み込まれるときにタイマーが開始する前に）タイマーが開始しないようにコードを微調整すると、AJAXコードは機能しなくなりました。

私の質問は、AJAX呼び出しが元のjQueryタイマーで機能するのに、微調整されたjQueryタイマーコードでは機能しないのはなぜかということです。

どんな洞察も大歓迎です！

元のタイマーjQueryは次のとおりです。

    var count = 0;
    var interval = setInterval(function(){ 
    $('#timer').html(count + ' secs.');
        count++;
    },1000);

クリック機能が追加された新しいタイマーjQueryは次のとおりです。

$('#start_answer').click(function(){
    var count = 0;
    var interval = setInterval(function(){ 
        $('#timer').html(count + ' secs.');
        count++;
        },1000);
    $('.cluster_a').addClass("answer_highlight");
    $('.cluster_q').addClass("question_unhighlight");

});

AJAX呼び出しは次のとおりです。

        $('#process_structure').live('click', function () {
        var postData = $('#inputs_structure').serializeArray();
        postData.push({name: 'count', value: count});
        $('#testing').fadeOut('slow');
        $.ajax ({
            type: "POST",
            url: "structure_process.php",
            data: $.param(postData),
            success: function(text){
                $('#testing').fadeIn('500', function(){
                    $('#testing').html(text);
                })
            }
        });

        $(this).parent().html('<a class="right_next" href="/structure.php">Do another</a>');

        clearInterval(interval);
        return false;
    })

適用されるHTML：

        <div class="problem" id="testing"> <!-- create main problem container -->
        <div class="cluster_q">
            <div class="title"><?php if($switch){; echo $_SESSION['title']; ?></div>
                <div class="summary"><?php echo $_SESSION['problem']; ?></div>
                    <div class="extras"><?php echo 'Categories: ' . $_SESSION['category'][0] . ' | Source: <a href="' . $_SESSION['source'][1] . '">' . $_SESSION['source'][0] . '</a>'; ?> <!--<a href="http://www.engadget.com/2011/01/06/gm-invests-5-million-in-powermat-says-wireless-charging-headed/">Engadget blog post</a>--></div>
            <button id="start_answer">start</button>
        </div>
                    <form method="POST" id="inputs_structure"> 
                        <div class="cluster_a" id="tree_container">
                            <?php acceptTreeTest($num); ?>
                        </div>

                        <table class="basic" id="new_bucket">
                            <tr>
                                <td class="td_alt"></td>
                                <td class="td_alt"><a href="#" id="add_bucket" class="extras">add bucket</a></td>
                                <td class="td_alt"></td>
                            </tr>
                        </table>
                    </form>
        <?php } else{; ?>
            <p>Whoa! You've done every single structure question. Nice work!</p>
            <a href="/structure.php">Start going through them again</a>
            </div> <!-- extra /div close to close the divs if the page goes through the else statement -->
            </div> <!-- extra /div close to close the divs if the page goes through the else statement -->
        <?php }; ?>      
    </div> <!-- closes problem container -->
4

2 に答える 2

0

コード内のおよび呼び出しのスコープ内にあるように、クリック ハンドラーの外でintervalおよびcount変数を宣言する必要があります。pushclearInterval()

var count = 0;
var interval;
$('#start_answer').click(function(){
    interval = setInterval(function(){
        $('#timer').html(count + ' secs.'); 
        // rest of code


$('#process_structure').live('click', function () {
    var postData = $('#inputs_structure').serializeArray();
    postData.push({name: 'count', value: count});
    ...
    clearInterval(interval);
于 2011-06-17T17:25:09.763 に答える
0

何をしようとしているのかを正確に伝えるのは難しいですが、2 番目のコード スニペットでは、間隔がクロージャ内にあり、外部からアクセスできません。最初の例では、interval がグローバルであるように見えます。AJAX呼び出しでclearIntervalを呼び出すと、利用可能な間隔変数がないと思います。

于 2011-06-17T17:26:10.207 に答える