Javascript 点击按钮不工作，但点击传单标记工作正常？

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

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

但是现在我想稍微改变一下这个功能。我希望使用传单中的

bindpoppup

方法弹出一个窗口，显示一个关于用户的小信息框，该信息框将显示聊天按钮，单击该按钮将显示聊天框，但我不知何故未能成功

我在正文中设置了一个隐藏的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>

---

有人能指出我遗漏了什么吗？

好吧，我终于找到了问题所在。实际上有几件事

首先，所有聊天按钮都具有相同的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，而是在循环中每次都克隆它，并给出chat按钮和id

“#chatWithUser”+I

，从而解决了冲突问题

但即使在这一点上，点击事件也不起作用。因此，我采纳了委托人的建议，并使用了如下委托事件：

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

---

尽管我仍然不完全清楚为什么这样做，为什么不使用一个简单的

$（ele）.on（'click'，callback）但此解决方案对我有效。
您是否尝试使用委派事件<代码>$（文档）.on（'click'，'chatWithUser'，函数（e）{/*…*/}）恐怕我不确定这是如何工作的。我将首先调查委托事件。谢谢你的快速回复。不客气。如果您知道不推荐使用的
.live（）
方法，这是跨DOM删除事件的新方法。我尝试了您的代码
$（文档）。它工作，但不幸的是，不是我需要的。它一次打开所有聊天室。您能帮我提供一个类似的解决方案，但只针对单击的聊天按钮吗？：）可能是因为您对所有聊天室使用相同的ID，请记住ID必须是唯一的标识符。如果是这样的话，你应该考虑把它改成一个类。我会发布一个答案来解释它。我很高兴你做到了。我可以向你解释最后一点。设置事件处理程序时，要处理的元素必须在dom中<代码>$（elem）.on（'click'，…）；//但elem还不存在。一个委派的事件可以进行委派，我的意思是：
$（文档）将事件绑定到文档（一个始终留在文档中的元素），它会注意到代表其子元素的单击。摘要：“事件委派是指使用事件传播（冒泡）的过程在DOM中处理事件的级别高于事件起源的元素。它允许我们为现在或将来存在的元素附加单个事件侦听器。“-摘自。这很有意义。非常感谢。：）
$(document).on('click', '#chatWithUser' + i, function(e){
// my code here
});