Ol3ポップアップでjavascriptで作成されたボタンにクリックイベントを追加する方法はありますか？

Question

私はOpenlayers 3のWebマッピングアプリケーションを開発中です。機能（ポイント）を地図上に表示します。クリックすると、ボタンを追加したポップアップが表示されます。その後

map.on('singleclick', function(evt) { 
popup.hide(); 
popup.setOffset([0, 0]); 

// Attempt to find a feature in one of the visible vector layers 
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) { 
return feature; 
}); 
if (feature) { 
    var coord = feature.getGeometry().getCoordinates(); 
    var props = feature.getProperties(); 
    var info = "<input type='button' id='popupButton' value='Get here ?' />" ; 
    // Offset the popup so it points at the middle of the marker not the tip 
    popup.setOffset([0, -22]); 
    popup.show(coord, info); 
    } 
}); 

私はstackoverflowの中にいくつかの同様の質問を見て、イベントが発生したとき、私は機能を起動するには、このコードを試してみました：ここにポップアップし、最初のボタンのコードがある問題

$(document).on("click", "#popupButton", function(){ 
     alert(nearest_feature(my_position)); 
}); 

私は、ドキュメントを '#map'（マップが表示されているdiv）で置き換えようとしましたが、まだ何も表示されませんでした。

ポップアップ内のそのボタンのイベントをトリガーするにはどうすればよいですか？

Answer 1

私はあなたがそれを使用していると思うように実装しようとしました。

<div id='container'> 
<button id="AddDynamicBtn"> 
Add Dynamic Btn 
</button> 
</div> 


$(document).ready(function() { 
    $('#container').on('click','#DynamicBtn', function() { 
    alert('TEST'); 
    }); 
    $('#AddDynamicBtn').on('click',function() { 
     $('#container').append('<button id="DynamicBtn">Dynamic Btn</button>'); 
    }); 

}); 

https://jsfiddle.net/d9eubeeu/

Answer 2

私は@JesperHøjerと@Mariusは、私はこれを追加しましたので、それが最初に動作しませんでしたその答えに与えたコードを使用：

map.on('singleclick', function(evt){ 
--------- 
$("#popupButton").on("click", function(){ 
     alert(nearest_feature(my_position)); 
}); 
} 

し、それを今すぐイベントが発生しました

Answer 3

イベントのバブリングが行われている可能性がありますか？すでに地図上にリスナーがあります。ポップアップにも潜在的に1つが存在する可能性があります。あなたはあなたの関数へのパラメータとしてイベントに渡す場合は、使用できます。

event.stopPropagation();