在Firefox中未定義Javascript事件

Question

以前已經提到過這個問題，但我仍然在圍繞如何解決我的問題中的錯誤而努力。我是學習Javascript/jQuery的新手。 Firefox提供了一個錯誤「ReferenceError：getFirstArr未定義」。我有一個簡化的腳本，我在這裏試着做JSFiddle（爲了使它工作，在一個月前先選擇一個年份按鈕）。

罪魁禍首似乎是getFirstArr（videos [i]）第28行。我真的不知道該怎麼辦，因爲我的代碼看起來正確。它適用於Safari，Chrome和IE。 Firefox是一個奇怪的人。以下是問題所在的點擊事件摘錄。

$('.campbutton').on('click', function() { 
    camp = $(this).attr('id'); 
    $('.campbutton').removeClass('green'); 
    $(this).addClass('green'); 
    $('#searcharea').html('<table></table>'); 
    var campyear = camp + year; 
    var count = 1; 
    var noResultCount = 0; 

    for (i = 0; i < videos.length; i++) { 
     for (j = 0; j < 5; j++) { 
      getFirstArr(videos[i]); // Firefox doesn't like this line 
      function getFirstArr(video) { // prints the the array where a match is found 

JSFiddle將包含整個代碼。所以我的問題是，爲什麼Firefox不接受函數調用，還有什麼需要改變？任何幫助或暗示讚賞（順便說一句，我仍然在努力獲得正確的表格標籤格式化輸出正確，所以視頻不只是堆疊在自己的頂部）。

編輯：Firefox的具體問題是當點擊營按鈕，沒有視頻加載在div。其他按鈕事件很好。

這裏是有問題的整個代碼：

var videos = [ ["string1A", "string1B", "string1C"], ["string2A", "String2B", String2C"] ]; 
var camp = ""; 
var year = ""; 
$('#searcharea').html('select a year button first'); 

$('.yearbutton').on('click', function() { 
    year = $(this).attr('id'); 
    $('.yearbutton').removeClass('green'); 
    $(this).addClass('green'); 


}); 

$('.campbutton').on('click', function() { 
    camp = $(this).attr('id'); 
    $('.campbutton').removeClass('green'); 
    $(this).addClass('green'); 
    $('#searcharea').html('<table></table>'); 
    var campyear = camp + year; 
    var count = 1; 
    var noResultCount = 0; 
    for (i = 0; i < videos.length; i++) { 
     for (j = 0; j < 5; j++) { 
      getFirstArr(videos[i]); 
      function getFirstArr(video) { 
       if (campyear === video[j]) { 
        var pos = video.indexOf(video[j]);     
        $('#searcharea').append('<tr><td>' + video[(pos - pos)] + '</td>' + '<td>' + 'Composer: ' + video[(pos -pos) + 1] + '<br>' + 'Player: ' + video[(pos - pos) + 2] + '<br>' + 'Piece: ' + video[(pos - pos) + 3] + '</td>'); 
       } 
       else noResultCount++;      

       if (campyear === video[j] && count % 3 === 0 && j === 4) 
        $('#searcharea').append('</tr><tr>'); 

       if (i === videos.lenght && j === 4) 
        $('#searcharea').append('</table>'); 

      } 
     } 
     count++; 
    } 
    if (noResultCount === videos.length * 5) 
     $('#searcharea').html("No results found"); 



}); 

Answer 1

http://jsfiddle.net/3ncc5xdx/123/

在這裏，我已經動了你的功能，像這樣的循環外，我認爲它的工作原理，除非我誤解是什麼問題：

$('.campbutton').on('click', function() { 
    camp = $(this).attr('id'); 
    $('.campbutton').removeClass('green'); 
    $(this).addClass('green'); 
    $('#searcharea').html('<table></table>'); 
    var campyear = camp + year; 
    var count = 1; 
    var noResultCount = 0; 
    function getFirstArr(video) { 
     if (campyear === video[j]) { 
      var pos = video.indexOf(video[j]);     
      $('#searcharea').append('<tr><td>' + video[(pos - pos)] + '</td>' + '<td>' + 'Composer: ' + video[(pos -pos) + 1] + '<br>' + 'Player: ' + video[(pos - pos) + 2] + '<br>' + 'Piece: ' + video[(pos - pos) + 3] + '</td>'); 
     } 
     else noResultCount++;      

     if (campyear === video[j] && count % 3 === 0 && j === 4) 
      $('#searcharea').append('</tr><tr>'); 

      if (i === videos.lenght && j === 4) 
       $('#searcharea').append('</table>');  
      } 
     for (i = 0; i < videos.length; i++) { 
      for (j = 0; j < 5; j++) { 
       getFirstArr(videos[i]); 
      } 
      count++; 
     } 
    if (noResultCount === videos.length * 5) 
    $('#searcharea').html("No results found"); 
}); 

因此，它的工作原理是該函數現在被聲明，然後才被使用一次。此外，它現在只宣佈一次，而不是一次又一次地在你的循環中。它可能適用於Chrome，因爲Chrome非常聰明，並且可以根據您的想法 - 但Firefox需要更嚴格的方法。