javascript - 如何使用 jQuery 对注入(inject)的 ajax 表单进行多次验证？

Question

我想要一个具有多重验证的表单(通过 ajax 注入(inject))。像这样:

<div data-form> <!-- Already on the page -->
  <!-- Coming from API -->
  <form> 
    <input type="number" data-input-decimal>
    <input type="number" data-input-integer>
    <input type="submit">
  </form>
</div>

这是我的 jQuery:

var $DATA_INPUT_DECIMAL = $('[data-input-decimal]');
var $DATA_INPUT_INTEGER = $('[data-input-integer]');
var $FORM = $('[data-form]');

$FORM.on('keydown', $DATA_INPUT_DECIMAL, function(e) {
  console.log('banana');
  // This is the validation for the input with decimal
}

$FORM.on('keydown', $DATA_INPUT_INTEGER, function(e) {
  console.log('apple');
  // This is the validation for the input with ONLY NUMBERS (0-9)
}

奇怪的是，当我在浏览器上进行测试时，当我keydown 表单中的任何input 时，这两个函数都会被调用。在这种情况下如何正确设置不同的验证？

提前致谢!

Answer 1

你需要简单的委托(delegate):

$('[data-form]').on('keydown', 'input', function(e) {
  if ($(this).is('[data-input-decimal]')) {
    console.log('decimal');
  } else if ($(this).is('[data-input-integer]')) {
    console.log('integer');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div data-form>
  <!-- Already on the page -->
  <!-- Coming from API -->
  <form>
    <input type="number" data-input-decimal>
    <input type="number" data-input-integer>
    <input type="submit">
  </form>
</div>