新しいjQuery関数を追加して既存の関数を実行できないのはなぜですか？

Question

新しい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 --> 

Answer 1

は、あなたは彼らがあなたのコードでpushとclearInterval()呼び出しの範囲になるようにクリックハンドラの外にintervalとcount変数を宣言する必要があります。

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

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