javascript - 每个按钮单击 : jQuery 时， map 都会附加到模态主体

Question

总结:

我正在创建一个显示用户选择结果的网页。第一个用户从给定面板中选择项目并单击添加按钮。这将创建用户所选项目的表行(就像将项目添加到购物车一样)。如果用户选择包含“ map ”，那么它会在创建的表格列之一中创建一个 #map 按钮。

我已经为 map 按钮创建了模态对话框 Bootstrap 。当用户单击它时， map 会弹出，一旦从模态页脚中单击“保存”按钮，它就会返回(纬度、经度、缩放)参数。

问题:

如果用户多次选择“ map ”选项。之前的 map 附加到模态主体。看起来很丑。

这里是创建表的 jquery 代码。

 .on('click','.addbutton', function(e) {
    $('table').find('tbody')
        .each(function(){
            var map_elements = '<td style = "text-align:center">';
            if (display_text == 'Map') {
                map_elements += '<button data-target="#map_btn_benefits_id" type="button" class="map_btn_benefits btn btn-info active" data-toggle="modal">Map</button>';
                map_elements += '<div id="map_btn_benefits_id" class="modal fade" role="dialog">';
                map_elements += '<div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title">Landscape Map</h4></div>';
                map_elements += '<div class="modal-body"><div id="map_id_benefits" style="width: 500px; height: 380px; margin: 0; padding: 0;"></div></div>';
                map_elements += '<div class="modal-footer"><button type="button" class="save-exit-benefits btn btn-primary" data-dismiss="modal">Save changes and Close</button>';
                map_elements += '</div></div></div></div>';
                map_elements += '</td>';

            }   
            else {
                map_elements += display_text+'</td>';               
            }

            console.log(map_elements);
$(this).append(
        "<tr>"+
        "<td><a class='remove-row text-danger'><i class='fa fa-times'></i></a></td>"+
        "<td style='text-align:center'>"+tree_benefits_text+"</td>"+
        map_elements+
        "<td style='text-align:center'>"+unit_text+"</td>"+
        "<td style='text-align:center'>"+dataset_text+"</td>"+
        "</tr>")

下面是创建 map 的脚本

.on('click', '.map_btn_benefits', function(){

    var ml = new googleMap({element: 'map_id_benefits'});       
    var save_selection_layer= [];
    $('.save-exit-benefits').click(function () {
        save_selection_benefits.push(
        {
            lon_map: ml.map.getCenter().lon,
            lat_map: ml.map.getCenter().lat,
            zoom_map: ml.map.getZoom(),
        });   
        
    });

    console.log(save_selection_benefits);
})

假设“googleMap()”创建了一个简单的 map 。我相信对于这个问题你不需要代码。我为我的错误解释道歉。我是 jquery 的新手。我正在寻找我在这里缺少的逻辑。

提前致谢

Answer 1

它通过清空模态容器来工作

$('map_id_benefits').empty()