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模式窗口？

希望以上内容有道理。

Answer 1

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

jQuery通过提供.on() method（在jQuery 1.7之前使用.live()）来“解决”这个问题，这样就可以自动绑定到未来的DOM元素匹配一个特定的jQuery选择器。 E.g。

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

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

有3种建议的解决方案：

使用jQuery在线修补Fancybox以使用.on()代替.bind()
每次向DOM添加新链接时更新Fancybox绑定
根本不要自动绑定Fancybox，而是在点击链接时手动触发

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

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

Fancybox打开href onclick

1 个答案: