javascript - DOM 在使用追加时复制内容

Question

如果我这样做，我有一个工作正常的 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"/>

Answer 1

发生这种情况是因为每当用户单击该元素时，您都会在套接字上一次又一次地为 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);
}