Question

我正在开发一个应用程序，我从数据库中获取所有用户，然后使用Leaflet标记在Mapbox地图上绘制它们。

当用户点击标记时，该特定的聊天框会打开，他可以与他们聊天。

但现在我想略微改变这个功能。我希望使用Leaflet中的bindPopup方法弹出一个弹出窗口，显示一个关于用户的小信息框，该信息框将显示聊天按钮，点击这将显示聊天框，但我在某种程度上失败了。

我在主体中设置了一个隐藏的div，它是弹出窗口内容的占位符，如下所示：

    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6 text-left">
                <h3 id="statusHolder">Status</h3>
            </div>
            <div class="col-xs-6 text-right">
                <button id="chatWithUser" class="btn btn-primary" href="">Chat</button>
            </div>
        </div>
    </div>

现在这是JS代码，它将标记放在适当位置并操纵弹出窗口的内容。它定义了点击事件上的标记以及点击时的按钮。点击标记工作正常。点击按钮不会。什么都没发生。没有控制台错误。事实上，我甚至无法通过它在控制台中记录任何内容。

$.getJSON('/users', function(response){

    $.each(response, function(i, user){

        // Parsing lat, lng values
        var lat = parseFloat(user.farmer_profile.lat);
        var lng = parseFloat(user.farmer_profile.lng);

        // Setting marker color based on status
        switch(user.status){
            case 'Available':
            var color = '#659265';
            break;
            case 'Busy':
            var color = '#C46A69';
            break;
            case 'Idle':
            var color = '#C79121';
            break;
        }

        // Setting icon of marker to differentiate between 
        // current user and everyone else
        var icon;
        var size;

        if(user.id == currentUser.id){
            icon = 'star';
            size = 'large';
        }else{
            icon = 'pitch'
        }

        // Plotting marker on the map for the farmer
        var marker = L.marker([lat, lng], {
            icon: L.mapbox.marker.icon({
                'marker-size': size,
                'marker-symbol': icon,
                'marker-color': color
            }),
        }).addTo(map);

        // Don't bind the existing user with the chat function.
        if(user.id == currentUser.id){

            return true;
        }

        // Binding the marker on click event to bring up the chat
        // This was working fine
        /*marker.on('click', function(){
            var chatboxId = 'chat-' + currentUser.id + '-' + user.id;
            chatboxManager.addBox(chatboxId, {
                first_name: user.first_name,
                last_name: user.last_name,
            });

            $('#' + chatboxId).chatbox({
                messageSent: function(id, user, message){
                    this.boxManager.addMsg('Me', message);

                    splittedId = id.split('-');

                    $.ajax({
                        url: '/messages',
                        method: 'post',
                        type: 'json',
                        data: {
                            receiver_id: splittedId[2],
                            body: message
                        }
                    });
                }
            });
        });*/

        $('span#firstNameHolder').text(user.first_name);
        $('span#lastNameHolder').text(user.last_name);

        $('b#farmNameHolder').text(user.farmer_profile.farm_name);

        $('b#latHolder').text(user.farmer_profile.lat);
        $('b#lngHolder').text(user.farmer_profile.lat);

        $('h3#statusHolder').text(user.status);

        // This is not yeilding any results.
        // Not event the console.log('hello');
        $('#chatWithUser').on('click', function(e){
            console.log('hello');
            var chatboxId = 'chat-' + currentUser.id + '-' + user.id;
            chatboxManager.addBox(chatboxId, {
                first_name: user.first_name,
                last_name: user.last_name,
            });

            $('#' + chatboxId).chatbox({
                messageSent: function(id, user, message){
                    this.boxManager.addMsg('Me', message);

                    splittedId = id.split('-');

                    $.ajax({
                        url: '/messages',
                        method: 'post',
                        type: 'json',
                        data: {
                            receiver_id: splittedId[2],
                            body: message
                        }
                    });
                }
            });
        });

        var popupContent = $('#popupContent').html();
        marker.bindPopup(popupContent);
    });
});

有人能说出我错过的东西吗？

Answer 1

好的，所以我终于弄清楚出了什么问题。实际上有几件事情。

首先，所有聊天按钮都具有相同的ID chatWithUser，因此发生了冲突。

所以我继续编写了一些代码：

var popupContent = $('div#popupContent').clone();

popupContent.find('span#firstNameHolder').text(user.first_name);
popupContent.find('span#lastNameHolder').text(user.last_name);

popupContent.find('b#farmNameHolder').text(user.farmer_profile.farm_name);

popupContent.find('b#latHolder').text(user.farmer_profile.lat);
popupContent.find('b#lngHolder').text(user.farmer_profile.lat);

popupContent.find('h3#statusHolder').text(user.status);

popupContent.find('#chatWithUser').attr('id', 'chatWithUser' + i);

$(document).on('click', '#chatWithUser' + i, function(e){
    console.log('hello');
    var chatboxId = 'chat-' + currentUser.id + '-' + user.id;
    chatboxManager.addBox(chatboxId, {
        first_name: user.first_name,
        last_name: user.last_name,
    });

    $('#' + chatboxId).chatbox({
        messageSent: function(id, user, message){
            this.boxManager.addMsg('Me', message);

            splittedId = id.split('-');

            $.ajax({
                url: '/messages',
                method: 'post',
                type: 'json',
                data: {
                    receiver_id: splittedId[2],
                    body: message
                }
            });
        }
    });
});

console.log(popupContent.html());

marker.bindPopup(popupContent.html());

我没有采用原始div，而是每次都在循环中克隆它，并给出了'#chatWithUser' + i的聊天按钮和ID，解决了冲突问题。

但即使在这一点上，点击事件也无效。所以我接受了@kmsdev的建议并使用了委托事件：

$(document).on('click', '#chatWithUser' + i, function(e){
// my code here
});

虽然我仍然不太清楚为什么这会有效，为什么不是简单$(ele).on('click', callback);，但这个解决方案对我有用。

按钮点击不工作，但点击上的传单标记工作得很好？

1 个答案: