DOM dupliziert den Inhalt, wenn

Question

mit anhängen Ich habe ein div, das funktioniert gut, wenn ich dies tun:

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

Mit dem obigen Code, was passiert, ist es meine vorherigen Aufkleber ersetzt, aber ich habe nicht meine vorherigen Aufkleber wünschen wegzugehen.

Daher dann mache ich das:

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

Was oben Code tut, ist .. seine meine Daten zu duplizieren. Zum Beispiel, wenn ich auf meinen "Sticker 1" klicke, dann wird Sticker 1 angezeigt und wenn ich nochmal darauf klicke, wird "Sticker 1" dreimal angezeigt ... 1 ist der vorherige und 2 ist der neue, dann if Ich klicke zum dritten Mal darauf, es zeigt 6 Stürmer ... 3 ist der vorherige und 3 ist der neue. Kann irgendjemand helfen?

Meine 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

Dies geschieht aufgrund Sie Ereignis immer wieder auf Sockel für getsticker, wenn Benutzer klickt auf das Element zuweisen, sodass Sie bei jedem Besuch der klicken Ereignis wird mehrfach registriert, also zum ersten Mal hat es eine registrierte Funktion zum zweiten Mal zwei und anschließend.

Hier müssen Sie Ereignis Listener oder löschen nur registrieren Sie es einmal über den Zeitraum Ihrer Seite .... Ich habe Ihnen das Beispiel der zweiten unten gegeben. Ich habe aus dem Click-Ereignishandler Ereignis registeration Code bewegt

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