jquery - Fancybox 打开 href onclick

Question

我正在做一些博客活动的 GeoMap，并且新的评论会使用来自套接字的数据添加到地图中。现在我希望这些评论链接到博客文章，但采用 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 模式窗口？

希望以上是有道理的。

score 3 · Accepted Answer

当您想在 JavaScript 中侦听对链接的单击时，您通常会在click事件上绑定一个侦听器。问题在于，在绑定之后，新链接可能会添加到侦听器不知道的 DOM 中，因此不会绑定到。

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

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

你的工作是让 Fancybox 做到这一点。很多人已经在 StackOverflow 上问过这个问题：

有3个建议的解决方案：

Patch Fancybox in-line 使用 jQuery 来.on()代替.bind()
每次将新链接添加到 DOM 时更新 Fancybox 绑定
根本不自动绑定 Fancybox，而是在单击链接时手动触发它

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

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

jquery - Fancybox 打开 href onclick

1 回答 1

Related

Reference