Jquery入力フィールドをdiv外の別の入力にコピー

Question

私はデバッグするためにいくつかのjqueryを持っています。私は、ページの上部にある入力フィールドにテキストを入力すると、#search_visibleTest入力に直接コピーされる最初の入力の値を期待している検索フィールドがあります。私は2つの入力を一緒に持っているとき、コードは完全に機能します。

私の問題： 最初の検索入力で独自のdivにテキストを入力すると、2次フィールドの正しいIDを持つ入力が機能していないか、入力されていません。私が間違っていることについての洞察より多くの情報が必要な場合はお知らせください。

<div class="head"> 
    <input class="form-input" id="search_visible" name="search_visible" placeholder="Search" autocomplete="off"> 
</div> 

<div class="body"> 
    <form> 
     <input class="form-input" id="search_visibleTest" name="search_visible" placeholder="Search" autocomplete="off"> 
    </form> 
</div> 

<script> 
    $("#search_visible").keyup(function(){ 
     $("#search_visibleTest").val(this.value); 
    }); 
</script> 

スクリプトは以下のコードでのみ動作します。私は問題が何であるか分かりません。私はコンソールエラーを取得していません。

<div class="head"> 
    <input class="form-input" id="search_visible" name="search_visible" placeholder="Search" autocomplete="off"> 
    <input class="form-input" id="search_visibleTest" name="search_visible" placeholder="Search" autocomplete="off"> 
</div> 

Answer 1

このようなものを使用できます。これは、データミラー属性を持つ入力の変更を、データミラーを持つ他の入力とミラーリングします。それから、好きなだけバインドすることができます。

$('[data-mirror]').on('change keyup paste',function(){ 
 
    $('[data-mirror]').val(this.value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" data-mirror><br/> 
 
<input type="text" data-mirror><br/> 
 
<div> 
 
    <input type="text" data-mirror> 
 
</div>