Javascript mapboxgl弹出窗口内未触发的事件

我试图对集群做一些定制的事情，当你点击一个不能进一步扩展的集群（例如，两个具有相同或非常相似位置数据的对象）时，应该会出现一个包含在该集群中的内容的列表，然后你可以与之交互。我能够检索对象、创建列表并将其放置在地图上的正确位置，但我无法将任何事件绑定到这些列表条目。我已经在map应用程序的其他部分创建了类似的功能，并且这些功能似乎按照预期工作。这些不是使用弹出库创建的，因此我可以尝试重用该技术，但放置弹出窗口的方便性使我至少想尝试让这些窗口处理事件

我已经尝试使用

添加的Listener

和

单击

、

鼠标点击

和

鼠标输入

事件，但没有触发任何事件

如何在mapbox弹出窗口中使用eventListeners？是否以某种方式对传递给弹出窗口的HTML进行了清理

我目前正在使用mapboxgl 1.2.0

弹出窗口的生成方式：

new mapboxgl.Popup({offset:25}).setHTML(generateListPopup(myEntries).outerHTML)
                            .setLngLat(coords[0])
                            .addTo($scope.map);

function generateListPopup(entries){
        var container = document.createElement('div');
        container.maxHeight = "240px";
        container.overflowY = "auto";
        var ul = document.createElement('ul');
        ul.style.listStyle = "none";
        ul.style.padding = "0";
        container.style.background = "blue"; // does set the color to blue
        container.addEventListener('mouseenter', function () { // does not trigger
            console.log("by golly"); // does not show
        });
        angular.forEach(entries, function (e) {
            var li = document.createElement('li');
            var entry = document.createElement('p');
            var f = document.createElement('button');
            entry.innerHTML = e.name;
            entry.style.cursor = "pointer";
            f.addEventListener('mouseup', function () {
                console.log("hello"); // nope
            });
            li.appendChild(f);
            li.appendChild(entry);
            ul.appendChild(li);
        });
        container.appendChild(ul);
        return container;
    }

内容的生成方式：

new mapboxgl.Popup({offset:25}).setHTML(generateListPopup(myEntries).outerHTML)
                            .setLngLat(coords[0])
                            .addTo($scope.map);

function generateListPopup(entries){
        var container = document.createElement('div');
        container.maxHeight = "240px";
        container.overflowY = "auto";
        var ul = document.createElement('ul');
        ul.style.listStyle = "none";
        ul.style.padding = "0";
        container.style.background = "blue"; // does set the color to blue
        container.addEventListener('mouseenter', function () { // does not trigger
            console.log("by golly"); // does not show
        });
        angular.forEach(entries, function (e) {
            var li = document.createElement('li');
            var entry = document.createElement('p');
            var f = document.createElement('button');
            entry.innerHTML = e.name;
            entry.style.cursor = "pointer";
            f.addEventListener('mouseup', function () {
                console.log("hello"); // nope
            });
            li.appendChild(f);
            li.appendChild(entry);
            ul.appendChild(li);
        });
        container.appendChild(ul);
        return container;
    }

---

非常感谢您的帮助

我只是把整个问题都打了出来，然后才弄明白，所以如果有人遇到同样的问题，不妨发出来：

在返回的容器上使用

setDOMContent

，而不是在返回的容器的

outerHTML

上使用

setHTML

。我猜想，当使用

outerHTML

序列化元素时，绑定事件会丢失