Question

我有评论系统，用户在每条评论上都有回复按钮。在回复后点击他用textarea获取新表格。在textarea我有smyles。用户点击微笑后，smyle代码会在textarea中插入光标所在的位置。

问题是，当我切换smyles按钮并再次显示时，微笑会插入三倍的时间。

我创造了jsfiddle的基本例子。 link

点击textarea
点击微笑。
切换“showsmiles”
再次点击微笑（这里微笑现在是三重奏）

代码：

$(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

更新：以便它处理多个实例

您的代码存在一些问题，特别是选择器以及如何将点击处理程序应用于导致您出现问题的问题。

只需处理显示和隐藏它的微笑列表，即可简化首次点击事件：

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

其次，您还可以专门定位微笑链接以提供处理程序，每次点击只会运行一次：

$('.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) );
});

工作小提琴展示两个一起玩得很好的实例：

https://jsfiddle.net/s20L85wy/

Answer 2

问题是您每次单击按钮切换可见性时都为每个标记设置了click方法。拆分这个解决了这个问题：

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') + ": ")
    });
})

这适用于多个实例，我认为代码更清晰。

点击内部点击三元组设定值

2 个答案: