根据点击的表情符号将表情符号添加到输入字段

Question

我有这两个函数可以将选定的表情符号添加到输入字段。

然而，第一次点击它不显示任何表情符号，第二次点击它显示两个表情符号，第三次点击它显示四个表情符号。

有没有什么办法解决这一问题？

谢谢。

HTML：

<a id="smiley" title="smiley" href="#" onclick="enableTxt(this)" >&#128515;</a>
<a id="sadface" title="sadface" href="#" onclick="enableTxt(this)" >&#128530;</a>

查询：

function enableTxt(elem) {
    var id = $(elem).attr("id");

    //Add emoji to chat when clicked with selected id
    $("#" + id).click(function() {

        $('#usermsg').val($('#usermsg').val() + $("#" + id).html());
    });
}

Answer 1

您会混淆内联事件处理程序和不显眼的事件处理程序。基本上每次运行“enableTxt”时，它都会在同一个按钮上设置一个新的“click”事件处理程序。因此，您第一次单击时什么也不会发生，因为它只是为下次创建了一个处理程序。然后第二次单击它时运行“enableTxt”（从而创建另一个新处理程序）和“enableTxt”上次创建的处理程序。然后下一次，这个效果加倍，等等。

这将工作得更好：

<a id="smiley" title="smiley" href="#" class="emoji" >&#128515;</a>
<a id="sadface" title="sadface" href="#" class="emoji" >&#128530;</a>

JS

// this wrapper stops the code from declaring the handler until the page has loaded 
// all the elements, otherwise the element we want to bind to might not exist yet

$(function() { 
    $(".emoji").click(function() {
        $('#usermsg').val($('#usermsg').val() + $(this).html());
    });
});