我的代码仅在控制台中执行，但在.js文件中不起作用

Question

我尝试了以下代码将文本字符替换为div消息中的img标签。

但是，当我在控制台中运行时，代码工作正常。但是当我在贴纸中尝试相同的操作时.js不起作用。谁能告诉我原因？

为聊天应用程序制作贴纸框的想法与Javascript和jQuery相吻合。

用户1 将发送：sticker1：到公共房间，并在#div 内替换为 img src

现在我正在尝试文档在显示div 但仍然不起作用时调用脚本。

$(document).ready(function()    is not working

而且$(function()也不起作用。

我的聊天应用程序使用模板文件夹/template/*.php和网络缓存文件夹来加载设计。我正在到处寻找解决方案，但没有运气。 我需要帮助

$("#chat-sticker-container").ready(function stickers() {
var emoCodes = [
':sticker1:',
];	
var $this = $("body");
	emoCodes.forEach(function(code) {
	  var image = '<img src="https://sevendays.co.in/wp-content/uploads/2019/02/' + code.replace(/:/g, "") + '.jpg">';
	  $this.find('p.chat-sticker').html(function(index, html) {    
		return html.replace(new RegExp(code, "g"), image);
	  });
	});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/sticker.js"></script>
<dive id="chat-sticker-container">
<p id="chat-sticker" class="chat-sticker">:sticker1:</p>

</dive>

Answer 1

确保你的JS在html在DOM中之后执行，这包括将脚本放在body标签的末尾。

Answer 2

由于脚本是在定义 html 之前调用的，因此它基本上什么都没有工作，因此将 放在 html 之后应该可以解决问题。

Answer 3

通过查看您的JSFiddle示例，我认为您需要使用MutationObserver API。通过这种方式，您可以检查元素或元素的子元素是否已更改、添加或删除。

我无法弄清楚将聊天div添加到页面的容器是什么，所以我只能指示您。但是根据您的小提琴，我选择了chat-main-scroll-chatroomdiv。

// List of emoCodes
var emoCodes = [
':sticker1:',
];
// Select chat container. Change if necessary.
var chatContainer = document.getElementById('chat-main-scroll-chatroom');
// Create a new observer.
var observer = new MutationObserver(function(entries) {
// Check for emocodes whenever something has changed.
emoCodes.forEach(function(code) {
var image = '<img src="https://sevendays.co.in/wp-content/uploads/2019/02/' + code.replace(/:/g, "") + '.jpg">';
$('p.chat-sticker').html(function(index, html) {    
return html.replace(new RegExp(code, "g"), image);
});
});
});
// Check if children are changed
var options = { childList: true }
// Observer the chat container and check if itself or children are changing.
observer.observe(chatContainer, options);

所以我真的希望这会对你有所帮助。在最好的情况下，您将能够筛选在发送消息之前已发送的文本。如果您的聊天应用程序的 API 提供此类控件，请使用它们。

祝你好运！