열린 jQuery가 팝업으로 링크를 생성했습니다.

Question

내 학교의 기존 웹 사이트를 다시 작성하고 있습니다. 제발 바쁘기 때문에 CSS와 HTML 엉망을 신경 쓰지 마세요. 또한, 나는 자바 스크립트 전문가가 아니므로 ...

지금, 내 문제.

웹 사이트에서는 이벤트 등을 위해 Google 캘린더를 사용합니다. 홈페이지에는 예정된 일정이있는 작은 사이드 바가 있습니다. 나는이 일을 매일 바꿀 계획이 아니기 때문에 앞으로 jQuery 이벤트를 통해 캘린더에서 곧 나오는 이벤트를 직접 가져온다. 이는 내 페이지에로드 : 위의 물건으로

  <div id="gcf-custom-template"> 
     <div class="gcf-header-block" style=" font-family: verdana; font-size: x-large;"> 
     <div class="gcf-title-block"> 
      <a href="/schoolkalender">Agenda</a> 
     </div> 
     </div> 
     <div class="gcf-item-container-block" style=" font-size: 12px; margin-top: 8px;"> 
     <div class="gcf-item-block"> 
      <div class="gcf-item-header-block" style=" font-size: 14px; margin-top: 8px;"> 
<div class="gcf-item-title-block"> 
       <a class="gcf-item-link"><span class="gcf-item-daterange">00/00</span></a> 
       <strong class="gcf-item-title" style=" float: right; width: 150px;">Item Title of Your event 
</strong> 
      <div style="display: block; clear: both;"></div> 
</div> 
      </div> 
     </div> 
     </div> 
    </div> 

가 제공이 스크립트 :

<script type="text/javascript"> 
    $('#gcf-custom-template').gCalFlow({ 
    calid: 'jb1p8523dur2d9qtrf0d2demcg%40group.calendar.google.com', 
    maxitem: 4, 
    mode: 'upcoming', 
    daterange_formatter: function (start_date, allday_p) { 
    function pad(n) { return n < 10 ? "0"+n : n; } 
    return pad(start_date.getDate() + "/" + pad(start_date.getMonth()+1)) + ":"; 
    } 
    }); 
</script> 

을 지금, 나는에 노력하고있어

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="http://www.sint-jozefscollege.be/gallery3/minislideshow/js/jquery.minislideshow.4.0.min.js"></script> 
<script src="/jquery.gcal_flow.js"></script> 
<script src="/jquery.popupWindow.js"></script> 

이는 모습입니다 새 탭에서 열려면 "이벤트의 항목 제목"에서 생성 된 링크를 가져옵니다.

<script type="text/javascript"> 
$('#link').popupWindow({ 
    height:500, 
    width:800, 
    top:50, 
    left:50 
    }); 
</script> 

내가 링크, 에 'ID = "링크"를'추가 할 jquery.gcal_flow.js 파일을 수정하지만이 작동하지 않습니다 나는이 스크립트를 사용하려고 노력했다. 생성되지 않은 다른 링크로 시도해도 제대로 작동합니다.

도움이 될 것입니다. PS : 다 함께 페이지 : http://www.sint-jozefscollege.be/calendar1.html

편집 : 구현 된 솔루션을 사용할 수 http://www.sint-jozefscollege.be

Answer 1

에서 나는 당신의 문제가 popupWindows가 실행될 때 스크립트가 결합하는 링크가 생성되지 않았 음을 말할 것입니다. 따라서 이벤트는 결코 바운드되지 않습니다. 이 플러그인은 위임 된 이벤트를 지원하지 않는 것 같지만 항상 수동으로 팝업 창을 만들고 .on()을 사용하여 이벤트를 위임 할 수 있습니다.

$(function() { 
    $('body').on('click', '.link', function(e) { 
     e.preventDefault(); 
     new_window = window.open($(this).attr('href'),'','height=500,width=800'); 
    }); 
}); 

여기에도 2 가지가 있습니다. 첫째, 코드를 jQuery ready function에 넣었습니다. 항상은 모든 jQuery 관련 코드를 준비 함수에 넣어야합니다. 둘째로 #link 대신 .link을 사용했습니다. ID는 문서에서 한 번만 사용해야하며, 여러 번 사용해야하는 경우 클래스를 대신 사용하십시오.