在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需要更严格的方法。