打开jQuery生成的链接弹出

我正在重建我的学校旧网站。请不要介意所有的CSS和html乱七八糟，因为我正忙着这样做。此外，我不是JavaScript专家，所以...打开jQuery生成的链接弹出

现在，我的问题。

该网站为他们的活动等使用谷歌日历。在主页上，有一个侧边栏与即将举行的活动。我没有计划每隔一天更改一次，所以我遇到了这个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 =‘链接’”的链接，但它不会工作。如果我尝试使用另一个未生成的链接，它工作得很好。

任何帮助将受到欢迎！ PS：一切的页面：http://www.sint-jozefscollege.be/calendar1.html

编辑：实施解决方案可在http://www.sint-jozefscollege.be

来源

2012-11-17 niknetniko

我说你的问题是，当你的脚本绑定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相关的代码放在ready函数中。其次，我用.link而不是#link。 ID只能在文档中使用一次，如果您需要多次使用它们，请改为使用类。

来源

2012-11-17 12:45:47

谢谢！这工作就像一个魅力（我添加'身体标签周围，因为我希望它能够在整个页面上工作）！ – niknetniko

啊，是的，我错过了。我的错误。我已经更新了答案:) –

打开jQuery生成的链接弹出

回答

相关问题