は現在、私は一度それだけでクリックされたオリジナルのマーカーに対するマーカーが表示されますクリックすると、各マーカーのポップアップが、その中のリンクを持って、マーカーを出力mapboxマップを持ってMapBoxポップアップ

Question

にJSを追加します。

ビューエリアのリンクは次のように構成されています

<p class="view_areas" id="123">View Areas</p>

などによるjsが：

は$('.view_areas').click(function() {console.log('test')})

しかしリンクをクリックすると、結果の任意の並べ替えを生成するために失敗しましたコンソール。これは、マーカがクリックされるまでDOM上に存在しないためですか？私もやって試みられてきました：

<p class="view_areas" id="123" onClick="view_areas()">View Areas</p> <script>function view_areas(){ console.log('test'); }</script>

をしかし、これは、エラーが見つかりません機能を生成します。基本的にリンクはトグルとして機能しますが、画面上に表示されるマーカーの量が多いため、レイヤーを使用するのは少し非実用的です。

Answer 1

はい、正確には、 DOMロード後に、この要素がページに動的に追加されているためです。あなたは、このようなdocumentとして、親要素にクリックハンドラを取り付けると、次の構文を使用して.view_areas要素をターゲットにevent delegatationを使用することができます。

この戦略は、基本的に任意の動的に追加された要素のために使用することができ、対象となります

$(document).on('click', '.view_areas', function() { 
    console.log('test'); 
}); 

第2パラメータon()で指定された子要素。あなたはモーダルは/ダイアログが動的にページに追加ないある特定の要素内に含まれていることがわかっている場合は、代わりにdocument/bodyの/ etcのことをターゲットにすることができます。

$('.somePermanentContainerElement').on('click', '.view_areas', function() { 
    console.log('test'); 
}); 

この機能が役立ちますように！