jQueryがモーダルの選択リストを更新しない

Question

私は動的に作成されたボタンを持っています。クリックすると、モーダルの選択リストを更新します。すべてのボタンが作成され、 "shown.bs.modal"イベントハンドラの下にあるモーダルワークとコンソールメッセージ（ "Appending ..."と "Done！"）が出力されます。

<!-- Scripts --> 
<script type="text/javascript"> 
    var element = $("#tableContainer"); 

    $("#seatPlayerModal").on("shown.bs.modal", function() { 
     console.log("Appending ..."); 
     $("#player_select").append($("<option></option>").val(1).html("One")); 
     $("#player_select").append($("<option></option>").val(2).html("Two")); 
     $("#player_select").append($("<option></option>").val(3).html("Three")); 
     console.log("Done!"); 
    }); 

    function drawSeat(seat) { 
     if (seat.PlayerName == null) 
     { 
      var id = "seat-" + seat.Id; 
      element.append("<button type='button' id = '" + id + "' class='seat-player btn btn-mdb'>Seat Player</button>"); 
      var button = $("#" + id); 
      button.click(function() { 
       $("#seatPlayerModal").modal('show'); 
      }); 
     } 
     else 
      element.append("<button type='button' class='seat-player btn btn-mdb'>Some player name ...</button>"); 
    }; 

    function drawTable(table) { 
     element.append('<div id="' + table.Id + '"><h2 class="m-t-2">' + table.Name + '</h2></div>'); 
     $.each(table.Seats.Data, function (key, value) { 
      drawSeat(value) 
     }); 
    }; 

    function onSuccessGetTables(tables) { 
     $.each(tables.Data, function (key, value) { 
      drawTable(value); 
     }); 
    }; 

    $(document).ready(function() { 
     getTables(onSuccessGetTables) 
    }); 
</script> 

（同じファイル内にある）モーダル：

<!-- Modal --> 
<div id="seatPlayerModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Choose Player to be Seated</h4> 
      </div> 
      <div class="modal-body"> 
       <form id="seatPlayerForm"> 
        <!-- Seat Id --> 
        <input type="hidden" id="Id" name="Id" value="0" /> 

        <!-- Selected Player Id --> 
        <input type="hidden" id="SelectedPlayerId" name="SelectedPlayerId" value="0" /> 

        <!-- Player List --> 
        <select id="player_select"></select> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="submit" class="btn btn-default">Seat Player</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

    </div> 
</div> 

私が選択リストが更新されていない理由はわかりません。コードを実行すると、簡略化されますが、jsfiddleで動作します。私はタイプミスの名前をチェックしましたが、何も見つからず、jQueryはエラーを表示しません。

Answer 1

問題は私がselectizeを知らずに使用したことでした。

は今、私はこのような項目を追加します。あなただけのボタンのいずれかをアップ配線しているので、それは

var accounts = $("#accounts")[0].selectize; 
     $.each(data, function (index, value) { 
      accounts.addOption({ 
       text: value.Name, 
       value: value.Id 
      }); 
     })