单击时按钮不起作用，但单击时传单标记工作正常？

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); 但这个解决方案对我有用。

单击时按钮不起作用，但单击时传单标记工作正常？

Button on click not working but leaflet marker on click works just fine?

javascript

jquery

leaflet