事件侦听器 "change" 仅在焦点位于对象上时才有效

Question

我目前正在为此苦苦挣扎。情况如下。我在一个页面上有多个输入字段

Input1 和 Input2 影响 Input3 的内容。

现在我不想在 Input3 的内容发生变化时触发事件处理程序。我试过了：

$('#div-xy').on('change', 'input', function(){console.log('input changed')});

但这似乎只有在焦点也位于 Input3 上时才有效，而在我输入 input2 或 input3 时情况并非如此。我也试过：

$('#div-xy').bind('DOMSubtreeModified', function(){console.log('CHANGE2')});

不幸的是，这具有相同的效果。您是否知道如何检查 Input3 中的更改？非常感谢您的帮助。

Answer 1

这样试试：

如果您有许多这样的字段，而不是让处理程序绑定到每个字段，您将通过使用委托事件处理程序获得更好的性能：

HTML:

<div id='parent'>
    <input type="text" class="search-field" />
    <input type="text" class="search-field" />
    <select class="search-field" ><option>1</option><option>2</option></select>
    <input type="radio" class="search-field" />
</div>

JS:

$('#parent').on('change', '.search-field', function() {
    // validate all search field values
    // display search results based on values
    // if search results already shown, filter based on $(this).val()
    console.log($(this).val());
});

Answer 2

更改事件仅在用户输入时触发，但可以显式触发。

因为您正在使用 jQuery:

$('#input2').change(()=>{
    console.log('input 2 is changed');

    $('#input3').val('some val');
    $('#input3').change()
})

$('#input3').change(()=>{
    console.log('input 3 is changed');
})

Answer 3

从技术上讲，当用户更改元素的值时会发生更改事件。如果通过 jquery 或其他代码更改了 input3 的值，它不会自行发生。但是，您可以在任何其他 jquery 函数中手动触发它，如果有 input.change() 的定义，那么它将被执行。

事件侦听器 "change" 仅在焦点位于对象上时才有效

Event listener "change" only works if focus is on object

javascript

jquery

input

jquery-events