#実装したいこと
以下のソースコードで、詳細表示を押したときにモーダルウインドウが表示されるようになる
申し訳ございませんが、ご指導をお願い申し上げます。
JavaScript
1$(function() { 2 3 /////////////////////////////////////////// Leaflet //////////////////////////////////////////////////////////////// 4 5 DEF_LAT = 34.000000; 6 DEF_LNG = 135.000000; 7 8 var map = L.map('map').setView([DEF_LAT ,DEF_LNG], 10); 9 10 // OSMタイル 11 var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 12 attribution : '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 13 }); 14 tileLayer.addTo(map); 15 16 $.getJSON("/tomb_geo_json").done(function(data){ 17 var geojson = L.geoJson(data, { 18 onEachFeature: function (feature, layer) { 19 layer.bindPopup( 20 '<a class="ajax" href="/example.html">詳細表示</a>' 21 ); 22 } 23 }); 24 geojson.addTo(map); 25 }); 26 27 /////////////////////////////////////////// Colorbox /////////////////////////////////////////////////////////////// 28 29 $(".ajax").colorbox({ 30 innerWidth: 600, //幅の指定 31 innerHeight: 600, //高さの指定 32 opacity: 0.5 33 }); 34 35});
#現状
通常の以下のコードからの呼び出しは正しく動作します。
ただし、layer.bindPopupに組み込んだ場合実行されません
HTML
1<a class="ajax" href="/example.html">詳細表示</a>
#実践したこと
- jQueryの呼び出し位置の変更
- 以下のコードのように呼び出し順の変更
JavaScript
1$(function() { 2 3 4 /////////////////////////////////////////// Colorbox /////////////////////////////////////////////////////////////// 5 6 $(".ajax").colorbox({ 7 innerWidth: 600, //幅の指定 8 innerHeight: 600, //高さの指定 9 opacity: 0.5 10 }); 11 12 /////////////////////////////////////////// Leaflet //////////////////////////////////////////////////////////////// 13 14 DEF_LAT = 34.000000; 15 DEF_LNG = 135.000000; 16 17 var map = L.map('map').setView([DEF_LAT ,DEF_LNG], 10); 18 19 // OSMタイル 20 var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 21 attribution : '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 22 }); 23 tileLayer.addTo(map); 24 25 $.getJSON("/tomb_geo_json").done(function(data){ 26 var geojson = L.geoJson(data, { 27 onEachFeature: function (feature, layer) { 28 layer.bindPopup( 29 '<a class="ajax" href="/example.html">詳細表示</a>' 30 ); 31 } 32 }); 33 geojson.addTo(map); 34 }); 35 36});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/22 02:48
2016/12/22 02:51
2016/12/22 02:53
2016/12/22 02:56
2016/12/22 02:58
2016/12/22 03:54