JS on change選擇選項由另一個腳本填充

Question

我正在使用數據庫中的腳本填充選擇選項表單。 現在我想做的是，如果用戶更改一個選項示例，選擇匹配項1，那么我將在另一個php文件上運行一些操作，以將匹配項1的詳細信息填充到div中。如果我不使用腳本填充選擇選項，它將運行良好。 雖然當我使用腳本時選項正確，但是在更改時什么也沒有發生。

標頭上的JS

function populateSelect(){
    var load = $.get('popRoundSel.php',{gameNo:"<?php echo $_POST['gameNo']; ?>"});
    $(".round").html('Refreshing');
    load.error(function() {
      console.log("Mlkia kaneis");
      $(".round").html('failed to load');
      // do something here if request failed
    });
    load.success(function( res ) {
      console.log( "Success" );
      $(".round").html('<select id="roundselect"><option>----</option>'+res+'</select>');
    });
    load.done(function() {
      console.log( "Completed" );
    });
}
$(document).ready(function()
    {
        $('#roundselect').change(function()
        {
            var selected = $(this).find(':selected').html();
            $.post('roundinfo_sc.php', {'beverage': selected}, function(data) {
              $('#result').html(data);
            });
        }); 
    });

頁碼

<h2>Select a round to see more details</h2>
<div class="round">
<script>
populateSelect();
</script>
</div>
<div id="result">    
</div>

Answer 1

問題是，當您添加新選擇時，您會松開綁定到它的所有事件。

因此，您應該將$('#roundselect').change(function()...放入這樣的加載成功函數中：

load.success(function( res ) {
      console.log( "Success" );
      $(".round").html('<select id="roundselect"><option>----</option>'+res+'</select>');
   $('#roundselect').change(function()
        {
            var selected = $(this).find(':selected').html();
            $.post('roundinfo_sc.php', {'beverage': selected}, function(data) {
              $('#result').html(data);
            });
        });  

 });