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 
      }); 
     })