Question

我很难确定为什么添加新的jQuery click函数会阻止我正常工作的现有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 -->

Answer 1

您需要在点击处理程序之外声明interval和count变量，以便它们适用于代码中的push和clearInterval()调用。< / p>

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

Answer 2

很难确切地说出你要做的是什么，但是在第二个代码片段中，间隔处于关闭状态，而且无法从外部访问。在第一个示例中，看起来区间是全局的。我猜你在AJAX调用中调用clearInterval时没有可用的区间变量。

为什么添加新的jQuery函数会阻止执行现有的jQuery函数？

2 个答案: