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');
    });
});

你还会注意到这里有两件事。首先，我将代码放在jQuery ready function中。您应该始终将所有与jQuery相关的代码放入ready函数中。其次，我使用.link代替#link。 ID只能在文档中使用一次，如果需要多次使用它们，请改用类。

在弹出窗口中打开jQuery生成的链接

1 个答案: