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”时，它都会在同一个按钮上设置一个新的“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());
    });
});

Answer 2

你不应该在调用函数中使用click事件，它会在每个函数调用中绑定click事件，所以它会增加，从函数内部删除click事件绑定

function enableTxt(elem) {
     $('#usermsg').val($('#usermsg').val() + $(elem).html());    
}

demo https://jsbin.com/misiwuyena/edit?html,js,output

Answer 3

您定义此事件处理程序：

$("#" + id).click(function() {

在 enableTxt 功能中。这意味着，每次调用外部函数时都会添加一个新的事件处理程序。因此你的问题。

如果您需要内联代码，我建议为未来的必需品添加事件参数，因此，减少的代码是：

＆＃13;

function enableTxt(elem) {
    document.querySelector('#usermsg').value += elem.textContent;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="smiley" title="smiley" href="#" onclick="enableTxt(this, event)" >&#128515;</a>
<a id="sadface" title="sadface" href="#" onclick="enableTxt(this, event)" >&#128530;</a>
<input type="text" id="usermsg">

＆＃13;

Answer 4

每次调用enableTxt时，它都会在元素上定义一个新的点击处理程序，这就是它添加多个表情符号的原因。

您应该直接插入表情符号，例如：

function enableTxt(elem) {
    $('#usermsg').val($('#usermsg').val() + $(elem).html());
}

<强>演示：

function enableTxt(elem) {
    $('#usermsg').val($('#usermsg').val() + $(elem).html());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="smiley" title="smiley" href="#" onclick="enableTxt(this)" >&#128515;</a>
<a id="sadface" title="sadface" href="#" onclick="enableTxt(this)" >&#128530;</a>
<input id="usermsg">

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

4 个答案: