41

リーフレットマップを稼働させています。マップ上に一連のポリゴンを (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/

4

7 に答える 7

60

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

ここでの理想的なアプローチは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 の問題を参照してください。

于 2012-12-04T08:51:19.260 に答える
29

ポップアップ コンテンツ ラッパーはイベントの伝播を防ぎますが、ポップアップの内側のマークアップ内のイベントは問題なく伝播します。イベントがマップ上に表示される (そして 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);
于 2013-02-28T11:57:50.197 に答える
5

これは、mapbox の公式 Web サイトで見つけたものです。 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!');});
于 2016-08-10T08:44:27.593 に答える
4

この問題に遭遇し、上記の解決策を試しました。しかし、それは私にはうまくいきませんでした。次のかなり基本的な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');
});
于 2013-10-02T09:18:07.847 に答える
3

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

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);
    }
}`
于 2016-06-14T22:34:02.643 に答える
1

jQuery を使用して要素を選択できますがcanvas、キャンバス内で独自のメソッドを使用する必要があります。まともなスタートはhttps://developer.mozilla.org/en/canvas_tutorialです。

于 2012-12-04T08:53:04.343 に答える