Откройте сгенерированные jQuery ссылки во всплывающем окне.

Question

Я переделываю старый сайт для моей школы. Пожалуйста, не возражайте против всего беспорядка CSS и HTML, так как я занят этим. Кроме того, я не специалист по javascript, так что...

Теперь по моей проблеме.

Веб-сайт использует Календарь Google для своих событий и т. Д. На главной странице есть небольшая боковая панель с предстоящими событиями. Я не планирую менять это через день, поэтому натолкнулся на jQuery, который напрямую вытягивает предстоящие события из календаря. Это загружено на моей странице:

<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>

Вот как это выглядит:

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

Я изменил файл jquery.gcal_flow.js, добавив в ссылки 'id="link", но он не будет работать. Если я попробую это с другой ссылкой, не сгенерированной, это работает просто отлично.

Любая помощь приветствуется! 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. Вы всегда должны помещать весь связанный с jQuery код в функцию ready. Во-вторых, я использовал .link вместо #link, Идентификаторы должны использоваться только один раз в документе, если вам нужно использовать их несколько раз, используйте классы.