L.DomUtil.get() 修饰符不更新 HTML 数据

Question

创建带有标记的地图。单击标记时，此标记必须显示一个弹出窗口。我像这样扩展了 L.Popup

L.InfrastructurePopup = L.Popup.extend({

    options: {
        template : "<form id='popup-form'>\
        <div>\
        <label for='problem'>Problem</label>\
        <textarea id='problem' rows='4' cols='46' placeholder='Type your text here'></textarea>\
        </div>\
        <div>\
        <label for='solution'>Solution</label>\
        <textarea id='solution' rows='4' cols='46' placeholder='Type your text here'></textarea>\
        </div>\
        <button id='button-submit' class='btn btn-primary' type='button'>Submit</button>\
        </form>",
    },

    setContent: function () {
        this._content = this.options.template;
        this.update();
        return this;
    },

    initializeForm(layer, callback)
    {
        var problem = L.DomUtil.get('problem');
        problem.textContent = layer.options.problem ? layer.options.problem : "";
        problem.addEventListener('change', (e) =>
        {
            layer.options.problem = problem.value;
        });
        var solution = L.DomUtil.get('solution');
        solution.textContent = layer.options.solution ? layer.options.solution : "";
        solution.addEventListener('change', (e) =>
        {
            layer.options.solution = solution.value;
        });

        var buttonSubmit = L.DomUtil.get('button-submit');
        buttonSubmit.addEventListener('click', (e) =>
        {
            callback(layer);
        });
    }
});

L.infrastructurePopup = function (options, source)
{
    return new L.InfrastructurePopup(options, source);
};

我将它链接到一个名为 InfrastructureMarker 的自定义标记中，该标记具有一个且唯一的弹出窗口，即 InfrastructurePopup。因此，当它调用 openPopup() 函数时，它会在地图 [ map.addLayer(popup) ] 上加载弹出窗口，并通过我在 addLayer(popup) 方法之后调用的方法 initializeForm() 为我提供正确的数据。

L.Map.include({

    openInfrastructurePopup: function (layer, callback)
    {
        this.closePopup();

        layer._popup._isOpen = true;

        this.addLayer(layer._popup);

        layer._popup.initializeForm(layer, callback);
    }
});

L.InfrastructureMarker = L.Marker.extend({

    openPopup: function (callback)
    {
        if (this._popup && this._map && !this._map.hasLayer(this._popup))
        {
            this._popup.setLatLng(this._latlng);
            this._map.openInfrastructurePopup(this, callback);
        }

        return this;
    },
    togglePopup: function (callback)
    {
        if (this._popup)
        {
            if (this._popup._isOpen)
            {
                this._popup._isOpen = false;
                this.closePopup();
            }
            else
            {
                this.openPopup(callback);
            }
        }
        return this;
    },
    bindPopup: function (callback, options)
    {
        var anchor = L.point(this.options.icon.options.popupAnchor || [0, 0]);

        anchor = anchor.add(L.Popup.prototype.options.offset);

        if (options && options.offset)
        {
            anchor = anchor.add(options.offset);
        }

        options = L.extend({offset: anchor}, options);

        if (!this._popupHandlersAdded)
        {
            this
                .on('click', () =>  {this.togglePopup(callback)}, this)
                .on('remove', this.closePopup, this)
                .on('move', this._movePopup, this);
            this._popupHandlersAdded = true;
        }

        this._popup = new L.infrastructurePopup(options, this).setContent();

        return this;
    },
});

L.infrastructureMarker = function (latlng, options)
{
    return new L.InfrastructureMarker(latlng, options);
};

但是，如果我决定单击一个标记，然后单击另一个标记而不关闭第一个标记，它会加载模板，但 initializeForm(callback) 不会更改数据。我检查了所有数据以知道它是空的还是什么，但一切正常，我绝对不知道问题出在哪里。我想在我的 L.DomUtils.get 触发之前尚未在 DOM 上设置弹出窗口，但是当我获取它们时，我不应该在 console.log 中看到未定义的元素。

Answer 1

我实际上发现了发生了什么：

实际上，当 L.map 调用它的 closePopup 函数时，它会破坏图层。 所以在那之后，它会创建一个新的来显示。但是前一种的剩余 HTML 仍然存在。

所以我最终将完全相同的 Id 绑定到两个 HTML 标签。异端！

我的解决方案变成了下一步：

    L.InfrastructurePopup = L.Popup.extend({

    setContent: function (layer)
    {
        var template = "<form id='popup-form'>\
        <div>\
        <label for='problem'>Problème Identifié</label>\
        <textarea id='" + layer._leaflet_id + "-problem' rows='4' cols='46' placeholder='Type your text here'></textarea>\
        </div>\
        <div>\
        <label for='solution'>Solution Proposée</label>\
        <textarea id='" + layer._leaflet_id + "-solution' rows='4' cols='46' placeholder='Type your text here'></textarea>\
        </div>\
        <button id='" + layer._leaflet_id + "-button-submit' class='btn btn-primary' type='button'>Submit</button>\
        </form>";

        this._content = template;
        this.update();
        return this;
    },
    initializeForm: function(layer, callback)
    {
        console.log(L.DomUtil.get(layer._leaflet_id+'-problem'));
        var problem = L.DomUtil.get(layer._leaflet_id + '-problem');
        problem.textContent = layer.options.problem ? layer.options.problem : "";
        problem.addEventListener('change', (e) =>
        {
            layer.options.problem = problem.value;
        });
        var solution = L.DomUtil.get(layer._leaflet_id + '-solution');
        solution.textContent = layer.options.solution ? layer.options.solution : "";
        solution.addEventListener('change', (e) =>
        {
            layer.options.solution = solution.value;
        });

        var buttonSubmit = L.DomUtil.get(layer._leaflet_id + '-button-submit');
        buttonSubmit.addEventListener('click', (e) =>
        {
            callback(layer);
        });
    }
});

L.infrastructurePopup = function (options, source)
{
    return new L.InfrastructurePopup(options, source);
};

在使用 layer_id 创建我的 InfrastructurePopup 并将其设置到我的模板时调用 setContent 使其工作。

我得到：'97-problem' 或 '99-problem' 和 '97-solution' 或 '99-solution