Question

I’m struggling to determine why the addition of a new jQuery click function is preventing an existing AJAX call I had from working properly (NOTE: I’ve double-checked and isolated the addition of the new function as the cause).

The context of the situation is that I have a page which gives the user a word problem, times the user’s response and then uses an AJAX call to process the user’s answer and display additional suggested answers. This functionality all works. However, when I tweaked my code so that the timer would not begin until after the user clicked a start button (before the timer began when the page loaded), the AJAX code stopped working.

My question is: why would the AJAX call work with the original jQuery timer but not the tweaked jQuery timer code.

Any insights would be greatly appreciated!

Here is the original timer jQuery:

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

Here is the new timer jQuery that has the added click function:

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

});

Here is the AJAX call:

        $('#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 it’s applied to:

        <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 -->

Answer 1

You need to declare the interval and count variables outside of the click handlers so that they are in scope for the push and clearInterval() invocations in your code.

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);