Click inside click triples setting value

Question

i have comments system, where user have reply button on every comment. after reply click he gets new form with textarea. in textarea i have smyles. after user clicks on smile, smyle code inserts in textarea where cursor is focused.

problem is, when i toggle smyles button and show again, smile inserts tripple times.

i crated jsfiddle basic example. link

1. click on "showsmiles" link in textarea
2. click on smile.
3. toggle "showsmiles"
4. click again on smile ( here smile is now tripple )

code:

$(document).on('click','.showsmiles',function(){

  var $smiles = $(this).next();
  $smiles.toggleClass('displaysmiles');

  $smiles.click('a',function(e){
    e.preventDefault();
    var $that = $(this);
    var txtarea = $that.closest('.cont').find('textarea');
    var caretPos = txtarea[0].selectionStart;
    var textAreaTxt = txtarea.val();
    var txtToAdd = ' :'+$that.data('alt')+': ';
    txtarea.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
  });
});

Answer 1

UPDATED: so that it deals with multiple instances

There are a few issues with your code, specifically around selectors and how you apply click handlers to them which are causing your issue.

Your first click event can be made simpler by just handling the showing and hiding of it's smile list:

$('.showsmiles').on('click', function(e){
    e.preventDefault();
    $(this).next().toggleClass('displaysmiles');
});

Secondly you can also target the smile links specifically to give them handlers, which will only run once per click:

$('.smiles a').on('click', function(e) {  
    e.preventDefault();
    var $that = $(this);
    var txtarea = $that.closest('.cont').find('textarea');
    var caretPos = txtarea[0].selectionStart;
    var textAreaTxt = txtarea.val();
    var txtToAdd = ' :'+$that.data('alt')+': ';
    txtarea.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
});

Working fiddle demonstrating two instances playing nice together:

https://jsfiddle.net/s20L85wy/

Answer 2

The problem was you were setting the click method for every a tag for every time you clicked the button to toggle visibility. Splitting this up solves the problem:

https://jsfiddle.net/n60otLw6/3/

$(document).on('click','.showsmiles',function(){

    var $smiles = $(this).next();
    $smiles.toggleClass('displaysmiles');
});

$('.cont').click(function(){
    var cont = $(this);
    var mes = $(this).find('textarea').val();

    cont.find('.appendsmile').bind("click", function(){
        cont.find('textarea').val(mes + " :" + $(this).attr('data-alt') + ": ")
    });
})

This works for multiple instances and the code is a little cleaner in my opinion.