javascript - jQuery:当 onkeyup 工作时，onclick 事件不工作

Question

我是 JS/jQuery 的新手，使用下面的代码尝试实现:

1. 单击按钮 ( <a> ) 更改 <input>值(value)
2. 在<input>中输入一些数字直接

Link to jsfiddle

到目前为止，一切都按预期进行，但是

当我在 <input> 中输入一些数字时，我无法再点击按钮了

这里是部分keyup代码

$(document).on("keyup", "#buy-num", function(event){
    event.preventDefault();
    var t = $.trim( $buynum.val() );
    console.log(t);
    if( isNaN(Number(t)) || isEmpty(Number(t)) || isFloat(Number(t)) || Number(t) > 99 || Number(t) < 1 ){
        alert("Please input 1～99 ");
    }else{
        $buynum.attr("value", Number(t));
    }
    console.log("test");
    // event.stopImmediatePropagation();
});

Answer 1

您想使用 $.val() 而不是 $.attr('value') 更新元素。

$(document).ready(function(){


  var $add = $("#btn-add");
  var $reduce = $("#btn-reduce");
  var $buynum = $("#buy-num");

  var count = Number($buynum.val());

  $(document).on("click", "#btn-add", function(event){
    event.preventDefault();

    var count = Number($buynum.val());
    var number = count + 1;

    if (number >= 199){
      $add.addClass("disabled");
      $reduce.removeClass("disabled");
      $buynum.val(199);
    } else {
      $add.removeClass("disabled");
      $buynum.val(number);
    }

    // event.stopImmediatePropagation();
    // return false;

  });

  // reduce
  $(document).on("click", "#btn-reduce", function(event){
    event.preventDefault();

    var count = Number($buynum.val());
    var number = count - 1;

    if (number <= 1){
      $buynum.val(1);
      $reduce.addClass("disabled");
      $add.removeClass("disabled");
    } else {
      $reduce.removeClass("disabled");
      $buynum.val(number);
    }

    // event.stopImmediatePropagation();
    // return false;

  });

  // onkeyup
  $(document).on("keyup", "#buy-num", function(event){
    event.preventDefault();

    var t = $.trim( $buynum.val() );
    console.log(t);
    // if ( isNaN(Number(t)) || t.length==0 || isFloat(Number(t)) || Number(t) > 199 || Number(t) < 1 ) {
    if ( isNaN(Number(t)) || isEmpty(Number(t)) || isFloat(Number(t)) || Number(t) > 199 || Number(t) < 1 ) {
      alert("请输入 1～199 之间的整数");
    } else {
      $buynum.val(Number(t));
    }
    console.log("test");
    return
    // event.stopImmediatePropagation();
  });
});






function isEmpty(t){
  return "" == $.trim(t)
}

function isFloat(t){
  return Number(t) === t && t % 1 !== 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="text buy-num" id="buy-num" value="1">
			                <a class="btn-reduce" id="btn-reduce" name="btn-reduce" href="#none">-</a>
			                <a class="btn-add" id="btn-add" name="add" href="#none">+</a>