使用append时复制内容的DOM

DOM duplicating the content when using append

本文关键字：DOM 复制 append 使用      更新时间：2023-09-26

如果我这样做，我有一个div可以很好地工作：

$('#chat').innerHTML(data.sticker);

使用上面的代码，它会替换我以前的贴纸，但我不希望我以前的标签消失。

因此，我这样做：

$('#chat').append(data.sticker);

上面的代码所做的是…它复制了我的数据。例如，如果我点击我的"贴纸1"，贴纸1就会显示，当我再次点击它时，第二次"贴纸1"会显示3次。。。1是前一个，2是新的，如果我第三次点击它，它会显示6个stcikers。。。3是前一个，3是新的。任何身体都能帮上忙吗？

我的index.html:

function which_sticker(image){
  var clickedElement;
  var $chat = $('#chat');
  var socket = io.connect();
  if(image=='1'){
    clickedElement = '<img src="stickers/angry/1.png" height="90" width="90"/>';
  }
  console.log(clickedElement);
  socket.emit('send sticker', clickedElement);
  socket.on('get sticker', function(data){
    console.log(data.sticker);
    $('#chat').append('<span class="msg"><b><span id="name_title">' + data.nick + '</span></b><br />' + data.sticker + '<br>');
  });
}
<img src="stickers/angry/1.png" onClick="which_sticker('1');" height="90" width="90"/>

之所以会发生这种情况，是因为每当用户点击元素时，你都会在getsticker的套接字上一次又一次地分配事件，所以每次点击事件都会注册多次，所以第一次它有一个注册的函数，第二次有两个，然后是。

在这里，您需要清除事件侦听器，或者只需在页面期间注册一次。。。。我给你举了下面第二个例子。我已经将事件注册代码从点击事件处理程序中移出

var socket = io.connect();
socket.on('get sticker', function(data){
  console.log(data.sticker);
  $('#chat').append('<span class="msg"><b><span id="name_title">' + data.nick + '</span></b><br />' + data.sticker + '<br>');
});
function which_sticker(image){
  var clickedElement;
  var $chat = $('#chat');
  if(image=='1'){
    clickedElement = '<img src="stickers/angry/1.png" height="90" width="90"/>';
  }
  console.log(clickedElement);
  socket.emit('send sticker', clickedElement);
}
相关文章：