使用添加时DOM复制内容

Question

如果我这样做，我有一个div可以正常工作：

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

使用上面的代码，发生的事情是它将替换我以前的标签，但是我不希望我以前的标签消失。

因此，然后我这样做：

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

上面的代码所做的是..它复制了我的数据。 例如，如果我单击“贴纸1”，则显示贴纸1，第二次单击“贴纸1”时，显示3次... 1是前一个，而2是新的，则如果我第三次单击它，它显示6个stikkers ... 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的套接字上一次又一次地分配事件，因此，每次单击该事件都会被多次注册，因此第一次它具有一个已注册的功能，第二次具有一个已注册的功能，然后是第二次。

在这里，您需要清除事件侦听器， 或者只在页面期间注册一次。...我已为您提供了下面的第二个示例。 我已将事件注册代码移出click事件处理程序

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);
}