jQuery - イベントリスナー「変更」は、フォーカスがオブジェクト上にある場合にのみ機能します

Question

現在、私はこれに対して少し苦労しています。状況は次のとおりです。ページに複数の入力フィールドがあります

Input1とInput2はInput3の内容に影響します。

ここで、Input3の内容が変更された場合にトリガされるイベントハンドラはありません。私は

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

を試みたが、唯一の焦点は、私がINPUT2またはINPUT3に入力していますように、ケースされていない入力3にもある場合に動作するように思われます。 私も試しました

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

悲しいことに同じ効果があります。 Input3の変更を確認する方法を知っていますか？助けを感謝します。

Answer 1

変更イベントは、ユーザー入力時にのみトリガーされますが、明示的にトリガーできます。

あなたはjQueryのを使用しているので：

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

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

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

Answer 2

このようにしてみてください。

あなたではなくハンドラがそれぞれ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 3

技術的要素の値は、ユーザによって変更された場合、変更イベントが発生します。 input3の値がjqueryやその他のコードによって変更された場合、それ自体では発生しません。しかし、それを他のjquery関数で手動で起動することができます。また、input.change（）の定義がある場合、それが実行されます。