発生している問題は、イベントの委任が原因です。click()イベントハンドラーを介してイベントリスナーをアタッチしようとすると、動的にロードされた要素ではなく、最初に作成された要素のみが参照されます。
マップを作成してから、以前はマップになかった場所にそのマップを使用しようと考えてください。最初は存在しなかったので、それが存在することを知らず、通常はそれを参照することができません。ただし、委任されたイベントを使用すると、基本的に、その場所を作成後にマップに追加し、最初はそこになかったとしても参照することができます。
.on()メソッドは、jQueryオブジェクトで現在選択されている要素のセットにイベントハンドラーをアタッチします。jQuery 1.7以降、.on()メソッドはイベントハンドラーのアタッチに必要なすべての機能を提供します。古いjQueryイベントメソッドからの変換については、.bind()、. delegate()、および.live()を参照してください。.on()でバインドされたイベントを削除するには、.off()を参照してください。一度だけ実行されてからそれ自体を削除するイベントを添付するには、.one()を参照してください。
加えて:
イベントハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが.on()を呼び出すときにページに存在している必要があります。要素が存在し、選択できることを確認するには、ページのHTMLマークアップにある要素のドキュメントレディハンドラー内でイベントバインディングを実行します。新しいHTMLがページに挿入されている場合は、要素を選択し、新しいHTMLがページに配置された後にイベントハンドラーをアタッチします。または、次に説明するように、委任されたイベントを使用してイベントハンドラーをアタッチします。
委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベントハンドラーがアタッチされたときに存在することが保証されている要素を選択することにより、委任されたイベントを使用して、イベントハンドラーを頻繁にアタッチおよび削除する必要をなくすことができます。この要素は、たとえば、Model-View-Controllerデザインのビューのコンテナー要素、またはイベントハンドラーがドキュメント内のすべてのバブリングイベントを監視する場合はドキュメントにすることができます。document要素は、他のHTMLをロードする前にドキュメントの先頭で使用できるため、ドキュメントの準備が整うのを待たずに、そこにイベントを添付しても安全です。
まだ作成されていない子孫要素のイベントを処理する機能に加えて、委任されたイベントのもう1つの利点は、多くの要素を監視する必要がある場合にオーバーヘッドがはるかに低くなる可能性があることです。