モバイルでブートストラップinput-group-addonと入力の切り替え

Question

モバイルでブートストラップinput-group-addonの位置を変えようとしました。 フロントエンドの可視性の観点から、私は欲しいものを手に入れました。入力はアドオンの後ろにありますが、＃input-newsearchでjavascriptを実行しています。それはまだ最初の入力を見ているようです。私は何が不足しているのですか？これをどのように解決できますか？

HTML：

<div class="input-group"> 
<input id="input-newsearch" class="form-control input-newsearch-desktop" type="text">                                   
<span class="input-group-addon" id="delete-newsearch">Delete</span> 
<span class="input-group-addon" id="remove-newsearch">Remove</span> 
<input id="input-newsearch" class="form-control input-newsearch-mobile" type="text">                                      
</div> 

はCSS：

.input-newsearch-mobile { 
display: none; 
visibility: hidden; 
} 

@media (max-width: 768px){ 
.input-newsearch-desktop { 
    display: none; 
    visibility: hidden;  
} 
.input-newsearch-mobile { 
    display: initial; 
    visibility: initial;   
}   
} 

のjavascript：

$('#delete-newsearch, #delete-newsearch').on('click', function() { 
$('#input-newsearch').val('');           
}); 

$('#input-newsearch').autocomplete({ 
source:'/source.php', 
minLength: 3, 
... 
}); 

Answer 1

代わりにあなたの選択としてIDを使用しての私が代わりにクラスを使用します。

あなたが意図したとおりに動作しない理由は、IDが一度しか表示されないためです。同じIdを持つ複数の要素があり、そのうちの1つを参照しようとすると問題が発生します。クラス'.input-newsearch'

$('#delete-newsearch, #delete-newsearch').on('click', function() { 
$('.input-newsearch').val('');           
}); 

$('.input-newsearch').autocomplete({ 
source:'/source.php', 
minLength: 3, 
... 
}); 

へ

スタイル

追加されたクラスinput-newsearch

<div class="input-group"> 
<input id="input-newsearch" class="form-control input-newsearch input-newsearch-desktop" type="text">                                   
<span class="input-group-addon" id="delete-newsearch">Delete</span> 
<span class="input-group-addon" id="remove-newsearch">Remove</span> 
<input id="input-newsearch" class="form-control input-newsearch input-newsearch-mobile" type="text">                                      
</div> 

のJavascript

変更IDセレクタ