javascript - 监听先前选择的输入的变化

Question

我有一些输入(复选框)，并且有以下代码:

$(document).on('change', '.my-input', function () {
    //I'm doing something here.
});

但是，在代码上方的几行我已经选择了这些复选框:

var myInputs = $('.my-inputs');

有没有办法可以将 myInputs 引用到监听器并使用该变量？

PS:这些复选框最初并不在 DOM 中。

Answer 1

无论是否处于初始 DOM 状态，监听器的使用方式都是相同的。也许也可以考虑先清除听众。下面的示例监听一组初始输入的 change，解除它们的绑定(bind)，添加新的输入并重新监听。另外，我未更改一个输入以显示初始监听器状态。

这有助于回答您的问题吗？我不确定您是否在获取新元素的值时遇到问题，或者只是在获取一般监听器的值时遇到问题。无论哪种方式，您都可以使用新的监听器来获取已检查状态等。

// Old listener state
$('.inputs, .old-inputs').on('change', function() {
  console.log('Input has changed (initial DOM)')
});

// Add a new element to the DOM
$('.inputs-container').append('<input type="checkbox" class="inputs">')

// Unbind
$('.inputs').unbind('change');

// New listener
$('.inputs').on('change', function() {
  console.log('Input has changed (post-DOM update)')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='inputs-container'>
    <input type='checkbox' class='old-inputs'>
    <input type='checkbox' class='inputs'>
    <input type='checkbox' class='inputs'>
</div>