자바 스크립트 이벤트가 파이어 폭스에서 정의되지 않았습니다.

Question

이 질문이 전에 제기되었지만 필자의 경우 오류를 수정하는 방법에 대해 고민하고 있습니다. 나는 Javascript/jQuery를 배우는 것에 익숙하지 않다. Firefox에서 "ReferenceError : getFirstArr이 정의되지 않았습니다."라는 오류 메시지가 나타납니다. 여기에 할 일을 단순화 한 스크립트가 있습니다 JSFiddle (작동하게하려면 월 버튼보다 먼저 년 버튼을 선택하십시오).

범인은 getFirstArr (videos [i]) 28 행인 것처럼 보입니다. 코드가 올바른 것처럼 보이기 때문에 무엇을 시도해야할지 모릅니다. Safari, Chrome 및 IE에서 작동합니다. 파이어 폭스는 이상한 사람이다. 다음은 문제가 발생한 클릭 이벤트의 미리보기입니다.

$('.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에는 전체 코드가 있습니다. 그래서 내 질문은, 왜 파이어 폭스가 함수 호출을 받아들이지 않고, 무엇을 바꿔야 하는가이다. 어떤 도움이나 힌트를 부탁드립니다. (btw, 나는 정확한 테이블 태그를 가져 와서 출력 결과를 올바르게 형식화하여 비디오가 스스로 위에 쌓이지 않도록 계속 노력하고 있습니다.)

편집 : 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는 약간 더 엄격한 접근 방식이 필요합니다.