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

Question

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

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

有什么办法可以解决这个问题吗？

谢谢。

HTML:

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

JQuery:

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”时，它都会在同一个按钮上设置一个新的“点击”事件处理程序。所以你第一次点击什么都没有发生，因为它只是创建了一个为下次准备好的处理程序。然后在您第二次单击时它会运行“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());
    });
});