jquery - Fancybox 打开 href onclick

Question

我正在制作一些博客事件的地理 map ，并且新评论会使用来自套接字的数据添加到 map 中。现在我希望这些评论链接到博文，但采用 Fancybox iframe 样式。

由于链接尚不存在，我无法让 fancybox 初始化这些链接。

我希望能够做这样的事情:

<a href="http://domain/url/to/post" class="fancybox iframe" onclick="trigger_the_link_in_fancybox_iframe">

这是迄今为止我用于套接字数据的代码:

var socket = io.connect('http://debug.dk:1000')
function geodata(content)
{

var jsonstring =  jQuery.parseJSON(content);

var lat = jsonstring.lat;
var long = jsonstring.lng;


 // Add marker

var myLatlng = new google.maps.LatLng(lat,long);


var marker = new google.maps.Marker({
    position: myLatlng,
    animation: google.maps.Animation.DROP,
    map: map,
    visible: false
})

var boxText = document.createElement("div");
    boxText.style.cssText = "border: 3px solid black; margin-top: 8px; background:#333; color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;";

    boxText.innerHTML = '<a class="fancybox fancybox.iframe" href="' +  jsonstring.link + '" onclick="jQuery(\'a.fancylink\').trigger(\'click\')";>' + jsonstring.post + '</a>'

    var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: {
                background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                opacity: 0.75,
                width: "180px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
    };

    var ib = new InfoBox(myOptions);
    ib.open(map, marker);


}



socket.on('notification', function(x) { geodata(x); });

当文档就绪时不存在链接时，有什么方法可以动态触发这些 fancybox iframe 模式窗口吗？

希望以上内容有意义。

Answer 1

当您想要监听 JavaScript 中链接的点击时，通常会在 click 事件上绑定(bind)一个监听器。问题是，在绑定(bind)之后，新链接可能会添加到 DOM，但监听器不知道，因此不会绑定(bind)到该 DOM。

jQuery 通过为您提供 .on() method 来“解决”这个问题。 (在 jQuery 1.7 之前，您将使用 .live())，这使得自动绑定(bind)到与特定 jQuery 选择器匹配的 future DOM 元素成为可能。例如

$(document).on('click', '.fancybox', function() { ... });

你的工作是让 Fancybox 来做这件事。很多人已经在 StackOverflow 上问过这个问题:

• Fancybox, getting Fancybox to bind using LIVE() to items being loaded onto the page after load
• Fancybox gallery with jQuery's .live()
• Jquery live - launching a fancybox iframe

有 3 个建议的解决方案:

1. 使用 jQuery 在线修补 Fancybox，以使用 .on() 而不是 .bind()
2. 每次将新链接添加到 DOM 时更新 Fancybox 绑定(bind)
3. 根本不自动绑定(bind) Fancybox，而是在单击链接时手动触发

我认为您选择哪一个是品味问题。但我可能会选择#3，因为它似乎开销最小:

$(document).on('click', '.fancybox', function(e) {
  e.preventDefault();
  $.fancybox({
    href : $(this).attr('href'),
    type : 'iframe',
    ...
  });
});