在内部单击三元组设置值

Click inside click triples setting value

本文关键字：设置 三元组 单击 在内部      更新时间：2023-09-26

我有评论系统，用户在每个评论上都有回复按钮。回复单击后，他获得了带有文本区域的新表单。在文本区域中，我有斯迈尔斯。用户单击"微笑"后，Smyle 代码将插入光标聚焦的文本区域中。

问题是，当我切换 Smyles 按钮并再次显示时，微笑插入了 tripple 时间。

我把JSFIDDLE的基本例子装箱了。

  1. 点击文本区域中的"显示里程"链接
  2. 点击微笑。
  3. 切换"显示微笑"
  4. 再次点击微笑（这里微笑现在是跛子）

法典：

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

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

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

通过处理其微笑列表的显示和隐藏，您的首次点击事件可以变得更简单：

$('.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/

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

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

这适用于多个实例，在我看来，代码更干净一些。

相关文章：