将 js 添加到 MapBox 弹出窗口

Question

目前我有一个输出标记的 mapbox 地图，每个标记弹出窗口中都有一个 link，一旦点击它只会显示相对于原始点击标记的标记。

视图区域 link 的结构如下：

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

生成的 js 如下：

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

但是单击 link 无法从控制台产生任何类型的结果。这是因为标记在单击 DOM 之前不存在吗？我也尝试过：

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

但这会产生找不到函数的错误。基本上 link 将用作切换，但是由于屏幕上会有大量标记，使用图层有点不切实际。

Answer 1

是的，正是因为元素是在DOM加载后动态添加到页面的。您可以使用 event delegatation 来定位 .view_areas 元素，方法是将点击处理程序附加到父元素，例如 document 并使用以下语法：

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

此策略基本上可用于任何动态添加的元素，并将以 on() 的第二个参数中指定的子元素为目标。如果您知道 modal/dialogs 包含在 而不是 动态添加到页面的特定元素中，则可以定位该元素而不是 document/body/等等

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

希望这对您有所帮助！

Add js to MapBox popup