Почему добавление новой функции jQuery препятствует выполнению существующей?

Я изо всех сил пытаюсь определить, почему добавление новой функции щелчка 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 -->

jquery ajax jquery-click-event
person john k    schedule 17.06.2011    source источник
comment
Можете ли вы добавить HTML, к которому это применяется.   -  person Balanivash    schedule 17.06.2011

Ответы (2)


arrow_upward
0
arrow_downward

Вам нужно объявить переменные interval и count вне обработчиков кликов, чтобы они находились в области действия вызовов push и clearInterval() в вашем коде.

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);
person karim79    schedule 17.06.2011
comment
Да, в этом есть смысл. Работал отлично! спасибо за помощь, очень признателен! - person john k; 17.06.2011
comment
счетчики также должны быть перемещены за пределы обработчика кликов;) - person Patricia; 17.06.2011
comment
ааа радость смотреть на устаревшую страницу :) - person Patricia; 17.06.2011

arrow_upward
0
arrow_downward

Трудно точно сказать, что вы пытаетесь сделать, но во втором фрагменте кода интервал находится в закрытии и недоступен извне. В первом примере интервал выглядит глобальным. Я предполагаю, что когда вы вызываете clearInterval в вызове AJAX, переменная интервала отсутствует.

person bmatheny    schedule 17.06.2011