Javascript 是否可以在html标记中包含单击事件？

这是一个小代码段，其中HTML标记被传递到一个特定的div，该div的类名为

消息容器

，工作正常

chatHTML += '<div class="message-block">'+
'<div class="user-icon"></div>'+
'<div class="message">'+ doc.data().message +'</div>'+
'<i class="fas fa-reply onclick=expand(doc.data().message)"></i>'+
'</div>';

$(".message-container").html(chatHTML);

但由于未定义扩展函数，因此会出现错误

---

有没有其他方法可以在HTML标记内调用onClick事件？

我建议您尝试一下

createElement

方法

你可以简单地

var myDiv = document.createElement("div");
myDiv.addEventListener('click', function () { alert('hi'); });
document.body.appendChild(myDiv);

这是您将对javascript引用进行更精细的控制。

<i class="fas fa-reply onclick=expand(doc.data().message)"></i>

您不小心在类中放置了onclick=“（）”。让我们解决这个问题，并添加“”：

---

与您的代码不完全相同，但有一个简单的可复制示例：

const someMessage='hello world'；
document.body.innerHTML+=“”+
''+
''+someMessage+''的+
''+
'';
函数扩展（消息）
{
console.log（消息）
}

。图标{
显示：块；
宽度：1米；
高度：1米；
背景：红色；
}

函数expand未定义或不存在，可能是因为它与调用它的函数不在同一范围内，该函数是动态创建的

不要使用onclick属性，而是使用.on函数或.click函数

（函数（$）{
$（文档）.ready（函数（）{
让chatHTML=''；
函数扩展（消息）{
控制台日志（消息）；
}
chatHTML+=''+
'' +
“消息”+
'' +
'';
$（“.message container”）.html（chatHTML）；
$（“.message block”）。在（“单击”，函数（）{
展开（“消息”）；
});
});
})（jQuery）

通常使用内联事件处理程序

它可能更适用/更适合使用。它允许您为尚未创建的元素分配处理程序

此外，尝试使用更现代的方法来附加html，如。下面是一个基于问题代码的示例


document.addEventListener（“单击”，句柄）；
//添加2个块
document.querySelector（“#chatHtml”）
.insertAdjacentHTML（“beforeend”`
第一区
ⓘ
`);
document.querySelector（“#chatHtml”）
.insertAdjacentHTML（“beforeend”`
第2区
ⓘ
`);
函数句柄（evt）{
常量原点=evt.target；
if（origin.classList.contains（“fa回复”））{
//                    ∟ 仅当单击b.fa-reply时
const messageBlock=origin.closest（“.messageBlock”）；
//                          ∟ 检索父div.message-block
messageBlock.querySelector（“.message”）.textContent=
//                         ∟ 用一些文本填充div.message
`是${new Date（）.toLocaleTimeString（）}，您单击了！`；
}
}
正文{
保证金：2rem；
字体：普通12px/15px verdana，arial；
}
范徐丽泰议员的答覆{
光标：指针；
最小宽度：24px；
显示：内联块；
保证金：0.5雷姆0；
字体大小：1.3rem；
}
是的，但是您需要明智地使用您的
“
”。我建议使用“将整个字符串括起来，然后您可以同时使用”和“根据需要使用”
<i class="fas fa-reply onclick=expand(doc.data().message)"></i>

<i class="fas fa-reply" onclick="expand(doc.data().message)"></i>