セマンティックUI：動的に追加されたドロップダウンメニューはセレクトの値を変更しません

Question

セマンティックUIフレームワークを使用している間、私は複数のアイテムを動的に追加できるフォームを作成しています。

これらのアイテムのフォームには、変更をリッスンするために必要なドロップダウンメニューがあります。これは、ページがロードされたときに初期化されたドロップダウンに対しては完全に機能しますが、動的に追加されたドロップダウンでは機能しません。

は私の問題を特定するための試みで、私はこのJSFiddleを作成しました：https://jsfiddle.net/e7q1shyv/1/

セマンティックUIのドロップダウンメニューが<select>を更新していないようです。

私はドキュメントを調べてみましたが、検索しましたが、これについて何も見つかりませんでした。

この問題を修正していただきありがとうございます。

Answer 1

あなたは、この行でエラーが発生しています。

$(document).on('change', 'select', function(){ 
    $('span').html($('select').val()) 
}); 

ここでは、選択クラスの最初のselect要素に常に対応する 'select'の値を取っています。現在のインスタンス値を取得するには、$ thisに変更します。あなたのコードは

$(document).on('change', 'select', function(){ 
    $('span').html($(this).val()) 
}); 

の作業フィドルに変更します

- https://jsfiddle.net/e7q1shyv/3/

Answer 2

作業コードを確認しています。

$(document).ready(function() { 
 
    $('select').dropdown(); 
 
}); 
 

 
$(document).on('change', 'select', function() { 
 
    var valu = $(this).val(); 
 
    $('span').html(valu); 
 
}); 
 

 
$('button').click(function() { 
 
    $('select').first().clone().appendTo('.selects') 
 
    $('select').dropdown(); 
 
});

.ui.button { 
 
    margin-top: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.1/semantic.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.1/semantic.js"></script> 
 
<div class="selects"> 
 
    <select class="ui dropdown"> 
 
    <option>Option 1</option> 
 
    <option>Option 2</option> 
 
    </select> 
 
</div> 
 

 
<button class="ui button">Add select</button> 
 

 
<p>Value changed: <span></span></p>

あなたは何をしていただけselect要素のフェッチ値であり、それはすべての時間は、DOM内の選択の最初のインスタンスの値を取得します。

私がvar valu = $(this).val();を書き込んだときに現在の要素の値を取得すると、現在の要素の値が取得されます。

ここに更新されたjsfiddleリンクがあります。

Answer 3

ただ、次のように、$(this)ため$('select')を変更し、それが完璧に動作します：

$(document).on('change', 'select', function(){ 
    $('span').html($(this).val()) 
});