web-dev-qa-db-ja.com

Leaflet Popup内のリンクをクリックして、Javascriptを実行します

リーフレットマップを実行しています。マップ上に一連のポリゴンを（GeoJSONを介して）オーバーレイし、各ポリゴンにポップアップを添付します。各ポップアップには、そのポリゴンに関する情報が表示されます。

ポップアップ内に、クリックするとAJAX=を介してさらに小さなポリゴンをプルし、表示するjavascript関数を実行するリンクを用意したいと思います。

通常のjQuery/Javascriptクリックイベントを介してリンクのクリックをキャッチするスクリプトを取得できません。これが通常の意味です（以下は機能しません）：

$('a .smallPolygonLink').click(function(e){
  console.log("One of the many Small Polygon Links was clicked");
});

BindPopup部分は次のとおりです。作成時に各ポリゴンで実行され、ポリゴンをクリックすると正しくポップアップします。リンクは表示されますが、クリックしても上記のコードは実行されません。

var popupContent = "Basic Information..." + '<a class="smallPolygonLink" href="#">Click here to see the smaller polygons</a>';
layer.bindPopup(popupContent);

ここに例を示したJSFiddleがありますが、はるかに単純な形式です。 http://jsfiddle.net/2XfVc/4/

javascriptjqueryleaflet
33
Josh

ポップアップ内のリンク要素は、ポップアップが開かれるたびにマークアップから動的に生成されます。これは、ハンドラーをリンクしようとしているときにリンクが存在しないことを意味します。

ここでの理想的なアプローチは、onを使用して、イベント処理をポップアップ要素またはその祖先に委任することです。残念ながら、ポップアップはイベントの伝播を妨げます。そのため、ポップアップの外部の静的要素にイベント処理を委任することはできません。

できることは、リンクを事前に構築し、ハンドラーをアタッチして、bindPopupメソッドに渡すことです。

var link = $('<a href="#" class="speciallink">TestLink</a>').click(function() {
    alert("test");
})[0];
marker.bindPopup(link);

以下にデモンストレーションを示します。 http://jsfiddle.net/2XfVc/7/

一般に、複数のイベントハンドラーで複雑なマークアップを挿入するには、次のアプローチを使用します。

// Create an element to hold all your text and markup
var container = $('<div />');

// Delegate all event handling for the container itself and its contents to the container
container.on('click', '.smallPolygonLink', function() {
    ...
});

// Insert whatever you want into the container, using whichever approach you prefer
container.html("This is a link: <a href='#' class='smallPolygonLink'>Click me</a>.");
container.append($('<span class="bold">').text(" :)"))

// Insert the container into the popup
marker.bindPopup(container[0]);

デモは次のとおりです。 http://jsfiddle.net/8Lnt4/

リーフレットポップアップでのイベント伝播の詳細については、 このGitの問題 を参照してください。

47
Asad Saeeduddin

Popupコンテンツラッパーはイベントの伝播を防ぎますが、ポップアップの内部マークアップ内のイベントは正常に伝播します。マップに表示される（およびDOMの一部になった）ポップアップ要素にイベントを追加できます。リーフレットイベントpopupopenを監視するだけです。

_var map = L.map('map').setView([51.505, 10], 7); //for example

//the .on() here is part of leaflet
map.on('popupopen', function() {  
  $('a .smallPolygonLink').click(function(e){
    console.log("One of the many Small Polygon Links was clicked");
  });
});
_

http://jsfiddle.net/tJGQ7/2/

これは私にとって魅力的です。ポップアップに_'a .smallPolygonLink'_がない場合、上記のコードは何もしません。このコードは、ポップアップを起動するたびに実行されます。ただし、ポップアップが閉じるとDOMノードが破棄されるため、要素に複数のハンドラーがアタッチされることを心配する必要はありません。

これを行うはるかに一般的な方法があります。ただし、eval()が含まれます。 ご自身の責任で使用してください。しかし、JSを含む部分ページをAJAXでロードすると同じリスクが発生するため、説明のために「リーフレットポップアップ内でJSを実行する」を紹介します。

_map.on('popupopen', function(){
    var cont = document.getElementsByClassName('leaflet-popup-content')[0];    
    var lst = cont.getElementsByTagName('script');
    for (var i=0; i<lst.length;i++) {
       eval(lst[i].innerText)
    }
});
_

デモ： http://jsfiddle.net/tJGQ7/4/

今、あなたは書くことができます：

_var popup_content = 'Testing the Link: <a href="#" class="speciallink">TestLink</a><script> $(".speciallink").on("click", function(){alert("hello from inside the popup")});</script>';

marker.bindPopup(popup_content);
_
25
semiomant

それは私がmapboxの公式ウェブサイトで見つけたものです： Mapbox.jsとjQueryでマーカーポップアップにクリックイベントを作成します。 コメントは$('#map')ではなく$('#mybutton')と言う理由を説明します。

var marker = L.marker([43.6475, -79.3838], {
  icon: L.mapbox.marker.icon({
    'marker-color': '#9c89cc'
  })
})
.bindPopup('<button class="trigger">Say hi</button>')
.addTo(map);
//The HTML we put in bindPopup doesn't exist yet, so we can't just say
//$('#mybutton'). Instead, we listen for click events on the map element which will bubble up from the tooltip, once it's created and someone clicks on it.

$('#map').on('click', '.trigger', function() {
alert('Hello from Toronto!');});
4
Kiki Yang

私はこの問題に遭遇し、上記の解決策を試しました。しかし、それは私にとってはうまくいきませんでした。次の非常に基本的なjqueryソリューションが見つかりました。

// add your marker to the map
var my_marker = new L.marker([51.2323, 4.1231], {icon: my_icon});
var popup = L.popup().setContent('<a class="click" href="#">click</a>');
my_marker.addTo(map).bindPopup(popup);

// later on
jQuery("body").on('click','a.click', function(e){
  e.preventDefault();
  alert('clicked');
});
3
jivanrij

_wrapperなどを含むpopupオブジェクトの内部プロパティを確認できます。

map.on('popupopen', _bindPopupClick);
map.on('popupclose', _unbindPopupClick);

var _bindPopupClick = function (e) {
    if (e.popup) {
        e.popup._wrapper.addEventListener('click', _bindPopupClickHandler);
    }
};
var _unbindPopupClick = function (e) {
    if (e.popup) {
        e.popup._wrapper.removeEventListener('click', _bindPopupClickHandler);
    }
}`
3
SerzN1

JQueryを使用してcanvas要素を選択できますが、キャンバス内で独自のメソッドを使用する必要があります。適切な開始点は https://developer.mozilla.org/en/canvas_tutorial です。

1
wandarkaf

mapbox JavaScriptライブラリにはイベントがあります：

bindPopup('<button class="trigger">Say hi</button>');
addTo(map);

$('#map').on('click', '.trigger', function() {
    alert('Hello from Toronto!');
});

https://www.mapbox.com/mapbox.js/example/v1.0.0/clicks-in-popups/

0
Dilip Kumar