ReferenceError : onClick 이벤트에서 "productfancybox가 정의되지 않았습니다."

Question

href 링크 onClick 이벤트에서 fancybox에 제품을 표시하려고합니다. 하지만 클릭 이벤트가 occures 때, 그것은

이 코드를 시도

ReferenceError: productfancybox is not defined

과 같은 오류를 제공합니다 :

HomePageProducts.cshtml : 왜 onClick 이벤트가 작동하지 않습니다

<div class="herry-pic-cols brdr"> 
      <ul id="homePageFeaturedProductInit"> 
       @foreach (var item in Model) 
       { 
        <li> 
         <span id="@item.Id"> 
          @Html.Partial("_CategoryBox", item) 
          <a id="Link" href="#" onClick ="productfancybox(@item.Id);">Link</a> 
         </span> 
        </li>  
       } 
      </ul> 

      <div class="clear"></div> 
      <a class="prev-btn2" href="#"></a> 
      <a class="next-btn2" href="#"></a> 
     </div> 

     <script type="text/javascript"> 
     $(window).load(function() { 

      function productfancybox(id) { 

       $.fancybox({ 
        'width': '80%', 
        'height': '100%', 
        'autoScale': true, 
        'transitionIn': 'fade', 
        'transitionOut': 'fade', 
        'href': '/Category/CategoryProductsFancyBox?Id='+id, 
        'type': 'iframe', 
        'onClosed': function() { 
         window.location.href = "f?p=&APP_ID.:211:&SESSION.::&DEBUG.::"; 
        } 
       }); 

      } 

     }); 
     </script> 

?
내가 뭔가를 놓친 것입니까?

Answer 1

함수 productfancybox은 윈도우로드에서 호출되는 익명의 함수에 로컬로 적용됩니다. 일단 그것이 발생하면 사라지고 더 이상 존재하지 않습니다.

는 대신 (이런 호출 내부 즉 하지) 글로벌 네임 스페이스의 함수를 정의 할 필요가, 또는 바람직하게는,이 함수를 네임 스페이스를 만들고 정의 :

var MyAwesomeNamespace = MyAwesomeNamespace || {}; 

MyAwesomeNamespace.productfancybox = function (id) { 
    ... 
} 

을 그리고 나중에 다음을 호출 할 수 있습니다.

MyAwesomeNamespace.productfancybox(1); 

스크립트가 실행 된 후 코드의 아무 곳이나 호출 할 수 있습니다. 이것은 단지 간단한 예일뿐입니다. 애플리케이션을위한 라이브러리를 설정하는 더 좋은 방법이 있습니다. 여기에서 일할 수있는 기초 입문서가 있습니다 : http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/.