Question

标题几乎都说明了。重申一下，当我将监听器.on('input',...分配给某个表单时，该事件将触发<select>和<input>更改，但它不会触发复选框更改。

这是我所谈论的一个小提琴：

<form class='request-form'>
  <input type='text'>
  <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
  </select>
  <label><input type="checkbox" name="not-completed" checked>Not Completed</label>
</form>

<div class='put-stuff-in-here'>

</div>

var i=0;
$(".request-form").on('input', function() { 

    $(".put-stuff-in-here").append(i + "<br>");
    i++;

});

有没有办法让一个侦听器可以触发表单中的所有输入变化？

Answer 1

您的input活动不会触发复选框，但我们可以通过change事件处理它。虽然我们需要分离监听器，但我们可以让它们调用一个共同的功能，这样只需要在一个地方进行任何需要进行的更改。

function changeFunction(elem) {
    $(".put-stuff-in-here").append(i + "<br>");
    i++;
}

$('.request-form input[type="checkbox"], .request-form select').change(function() {
    changeFunction($(this));
});

$('.request-form input[type="text"]').on('input', function() {
    changeFunction($(this));
});

JSFiddle

Answer 2

'input'事件仅在文本内容更改时触发。单击复选框不会更改表单中的文本。请参阅此回答here

当复选框更改时，表单上的输入事件不会触发

2 个答案: