javascript - 仅在第一次使用 oninput 时调用函数

Question

我有一个数字输入字段，我想像这样在 oninput 上调用一个函数。

function onInput(){
    $('.left-arrow' ).click(function(e) {
        $(".cancelButton").animate({
          "font-size": "1.1rem",
          "color": "#f65656"
        }, 300);
        e.preventDefault();
    });  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="numberInput" oninput="onInput();" type="number" min="0" inputmode="numeric" pattern="[0-9]*">

onInput(); 函数在单击按钮时启动另一个函数。 (左箭头单击)

(它使取消按钮具有动画效果，但这对于问题来说并不重要)

问题是，如果我输入 6 个数字，它会记住 6 个函数调用，如果我单击 de(左箭头)按钮，该函数将运行 6 次。我希望该函数仅在单击该按钮时运行一次。处理这个问题的最佳方法是什么？或者我应该做完全不同的事情？

Answer 1

您可以使用 JQuery one() 触发器:

$("#numberInput").one("input",function(){
    $('.left-arrow' ).click(function(e) {
        $(".cancelButton").animate({
          "font-size": "1.1rem",
          "color": "#f65656"
        }, 300);
        e.preventDefault();
    });  
});

仅附加事件一次。

演示片段:

$("#numberInput").one("input", function(){
    $("#btnOk").click(function(){
        console.log("Only once trigger per Click!");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="numberInput">
<button id="btnOk">Click Me!</button>

JQuery Source