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 的具体问题是当单击“camp”按钮时，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 需要稍微更严格的方法。