jquery - Fancybox open 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); });

リンクがドキュメントの準備ができていないときに、これらのファンシーボックス iframe モーダルウィンドウを動的にトリガーする方法はありますか?

上記が理にかなっていることを願っています。

score 3 · Accepted Answer

JavaScript でリンクのクリックをリッスンする場合は、通常、イベントにリスナーをバインドしますclick。問題は、バインド後に、リスナーが認識していないためバインドされていない新しいリンクが DOM に追加される可能性があることです。

jQueryは、特定の jQuery セレクターに一致する将来の DOM 要素に自動バインドできるようにする.on() メソッド(jQuery 1.7 より前のバージョン) を提供することで、これを「解決」します。.live()例えば

$(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',
    ...
  });
});

jquery - Fancybox open href onclick

1 に答える 1

Related

Reference