왜이 코드에서 fancybox가 처음으로 바인딩되지 않습니까?

Question

입력 요소와 그 옆에 링크가 있습니다. 사용자는 입력에 텍스트를 입력하고 링크를 클릭하여 검색어와 관련된 내용을 찾습니다. 결과는 fancybox를 사용하여 표시해야합니다. 여기 내 JS 코드 :

$(".srcaut").click(function() { 
     if($(this).prev("input").val() == '') { 
      alert('Empty field'); 
      return false; 
     } 

     srch = $(this).attr("id").replace("srch-",''); 

     $(this).attr('href',Url+'/'+srch+'/'+$(this).prev("input").val()); 
     $(this).fancybox(); 

    }).prev("input").keypress(function(even) { 
     if(even.keyCode == 13) { 
      $(this).next('.srcaut').click(); 
      return false; 
     } 

}); 

그러나 처음 사용자가 텍스트를 입력하고 링크를 클릭하거나로드 페이지 후 'Enter'키를 누르 fancybox 표시되지 않습니다. 그러나 그 후에는 작품입니다.

무엇이 문제입니까? fancybox가 처음에는 링크에 바인딩되지 않는 것 같지만 그 이유는 무엇입니까? 링크 .fancybox()를 호출

Answer 1

이 가 멋진 상자를 표시하지 않습니다, 그것은 단지 가 클릭하면 멋진 상자를 표시 링크를 준비합니다. 멋진 상자가 click 핸들러 안에 준비되어 있기 때문에 이것이 두 번째에만 작동하는 이유입니다.

문서를로드 할 때 링크에 .fancybox()을 호출해야하지만 input의 콘텐츠를 기반으로 동적으로 구성된 링크에 문제가 생길 수 있습니다. 당신은 input의 blur 이벤트에서 링크를 만들고 싶을 것입니다.

클릭 이벤트 내에서 표시하려면 어떻게해야합니까? 링크 이벤트?

.fancybox()를 호출하기 전에, 당신은 input가 비어있는 경우 것입니다 stop event propagation, 내가 유사한 문제에 직면하고있는 다른이를 게시하고 http://jsbin.com/exomad/3

Answer 2

에서 예를 참조하십시오 click 핸들러 ..

을 등록 할 수 있습니다 내 경우에는 내가

$('#addvideos').on("click",function(){ 
    $(".modal").fancybox(fancybox_default); 
}); 

fancybox_default <했다 - 상점 멋진 상자 구성 {높이, 폭}

addvideos < - 내가 URL을 클릭하지만 그 후 작동 할 때 URL 요소

을 가리킨 그래서 내 경우에는 구성은 늘 처음로드. . 내가 fancybox (fancybox_default) (". 모달") var에 쓰레기 = $를 추가했다

(내가 작동 (이 팝업을 보여줍니다)하지만 실 거예요 팝업의 높이와 폭을로드 의미); < - on 클릭 핸들러 ... // 그냥 그 일을로드하고 변수에 보관하십시오 ...

그것은

:-) 나를 위해 일한

Answer 3

나는 (내가 그것을 호출하기 전에 init이 경우에도 일할 수있는 가정)

동적으로 생성 된 앵커 태그에 클릭 이벤트를 바인딩하기 전에 fancybox를 초기화하는 의해이 문제를 해결 할 수 있었다

$('#a_email' + resultId).fancybox({ 
        //jq('#a_email' + resultId).fancybox({    
        'width': '45%', 
        'height': '55%', 
        'autoScale': true, 
        'scrolling': 'no', 
        'transitionIn': 'fade', 
        'transitionOut': 'fade', 
        'type': 'iframe' 
       }); 

그리고 직접

$.fancybox({       
         'width': '45%', 
         'height': '55%', 
         'autoScale': true, 
         'scrolling': 'no', 
         'transitionIn': 'fade', 
         'transitionOut': 'fade', 
         'type': 'iframe', 
         'href': url 
        }); 

fancybox 어떤 생각을 호출?