javascript - 将 js 添加到 MapBox 弹出窗口

Question

目前我有一个输出标记的 mapbox map ，每个标记弹出窗口中都有一个链接，单击后它只会显示与单击的原始标记相关的标记。

View 区域链接的结构如下:

<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 加载后动态添加到页面的。您可以使用 event delegatation通过将点击处理程序附加到父元素(例如 document)并使用以下语法来定位 .view_areas 元素:

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

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

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

希望这对您有所帮助!