单击特定 li + leaflet 时项目的乘法

Question

我有一个无法解决的大问题。事实上，我使用 Leaflet 来显示合并为 ajax 的地图，当我点击一个国家时，我会显示“客户”列表，但是当我点击特定客户时会显示更多信息，数据客户呈指数增长（1 到 3 到 5 到 8 ...）。感谢您的帮助。

var info = L.control();
    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info'); 
        this._div.setAttribute("id", "idBoxList");

        L.DomEvent
        .addListener(this._div, 'mouseover', function () {
            MapShowCommand(); 
        });     

        this.update();
        this.clickPays();
        return this._div;
    };
  info.update = function (props) {
        this._div.innerHTML = '<div class="wrapper--popup-agents"><h3 class="title-med">Agents disponibles</h3><div class="buttonListeAgent" id="buttonListeAgentId"><span class="icon-keyboard_arrow_down"></span></div><div class="textfield">Liste des agents disponibles selon le pays sélectionné.</div></div><div class="agents--wrapper"><div class="content"><ul class="listAgents"></ul></div></div>';
    };
function MapShowCommand() {
        $('.buttonListeAgent').on('click', function(){
            if ($('#idBoxList').hasClass("show")) {
                $('#idBoxList').removeClass("show");
                info.update();
            }
        });

        $('.listAgents li').on('click', function(){
            var el = document.getElementById('overlayMap');
            L.DomEvent.disableScrollPropagation(el);
            L.DomEvent.disableClickPropagation(el); 

            var idAgent = $(this).children('input').val();
            var base_path = $('#url_base').val();
            console.log(idAgent);

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url:"/map-agents/agents",
                type:'POST',
                data:{idAgent:idAgent},
                dataType: "JSON",
                beforeSend: function () { 
                    $('.wrapper--agent-map').append('<div class="spinner-border text-info" role="status"></div>');
                },
                success: function (response) {  
                    console.log(response.nameFirm);
                    //$('.wrapper--agent-map').append('<div>'+ response.nameFirm +'</div>' + '<div>'+ response.country +'</div>' +'<div>'+ response.city +'</div>' +'<div>'+ response.network +'</div>' + '<div>'+ response.lastName +'</div>');
                },
                complete: function () {
                    $('.spinner-border.text-info').remove();
                },
                error: function (response){
                    console.log(response);
                }
            });
        });

显示错误的图像：

Answer 1

你在每次鼠标悬停时再次将点击监听器添加到元素中，调用 .off() 来防止这种情况。

$('.buttonListeAgent').off().on('click', function(){
...

$('.listAgents li').off().on('click', function(){
...

单击特定 li + leaflet 时项目的乘法

Multiplication of item when click on specific li + leaflet

javascript

ajax

leaflet