Question

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

＆＃13;

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

＆＃13;

<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]*">

＆＃13;

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

仅附加一次事件。

演示代码段

＆＃13;

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

＆＃13;

<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>

＆＃13;

JQuery Source

Answer 2

我不会说这是做这件事的最佳方法。相反，您可以使用某种flag变量，在按钮单击时设置为true，单击处理程序检查此变量是否为true，否则返回。

var isActivated = false;

function onInput() {
  isActivated = true;
}

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

Answer 3

您可以在每次点击.left-arrow时检查是否有输入。

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

仅在首次使用输入时调用函数

3 个答案: