訪問由JQuery呈現的事件（HTML元素）

Question

我在JQuery的文檔中呈現了一個html元素，我的問題是我無法在呈現它之後訪問它，但是當我將它放在一個靜態html中時，我可以。讓我解釋我的代碼。

首先這裏是我插入我的html的div。

<div class="col-lg-8" id="datetypediv"> 
        {{-- <select required name="date_select" class ="form-control " id ="date_select"> 
         <option value="daily">Daily</option> 
         <option value="monthly">Monthly</option> 
         <option value="quarterly">Quarterly</option> 
         <option value="anually">Annually</option> 
        </select> --}} 
        {{-- date select variations --}} 
        </div> 

jQuery呈現的html進入div內部，這裏是我如何呈現它。

$(document).ready(function(){ 
     console.log('range not checked'); 
     $("#datetypediv").html("<select required name='date_select' class='form-control' id='date_select'>" + 
     "<option value='daily'>Daily</option>" + 
     "<option value='monthly'>Monthly</option>" + 
     "<option value='quarterly'>Quarterly</option>" + 
     "<option value='anually'>Annually</option> </select>"); 
     //date range 
     $("#rangediv").html("<label>Day&nbsp&nbsp</label><input class='form-control' style='width:243px;height:25px;' type='date' name='day_date' id='day_date'/>"); 
     $(function() { 
     $("#day_date").datepicker(); 
     }); 
    }); 

正如你所看到的，我現在正在渲染一個選擇標記，這裏就是這個問題。選擇標記的Onchange我將內部div再次更改爲另一個HTML，即此代碼。

$('#date_select').change(function() { 
    console.log('changed'); 
    if($('#date_select option:selected').val() == 'daily') {//value attribute 
    console.log('daily'); 
    $("#rangediv").html("<label>Day&nbsp&nbsp</label><input class='form-control' style='width:243px;height:25px;' type='date' name='day_date' id='day_date' />"); 
    $(function() { 
     $("#day_date").datepicker(); 
    }); 
    } else if($('#date_select option:selected').val() == 'monthly') { 

    console.log('monthly'); 
    $("#rangediv").html("<label>Month:&nbsp&nbsp</label>" + 
          "<select name='month_date_select' class='form-control' id='month_select' style='width:90px;height:35px;'></select>&nbsp&nbsp" + 
         "<label>Year&nbsp&nbsp</label>" + 
          "<select name='year_date_select' class='form-control' id='year_select' style='width:90px;height:35px;'></select>"); 

     var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 
     for (i = 0; i < 12; i++) { 
      $('#month_select').append($('<option />').val(months[i]).html(months[i])); 
     } 

     for (i = new Date().getFullYear() ; i > 2008; i--) { 
     $('#year_select').append($('<option />').val(i).html(i)); 
     }//script for populating the dropdown 
    } else if($('#date_select option:selected').val() == 'quarterly') { 
    console.log('quarterly'); 
    $("#rangediv").html("<label>Quarter:&nbsp&nbsp</label>" + 
          "<select name='quarter_date_select' class='form-control' id='quarter_select' style='width:90px;height:35px;'></select>&nbsp&nbsp" + 
         "<label>Year&nbsp&nbsp</label>" + 
          "<select name='year_date_select' class='form-control' id='year_select' style='width:90px;height:35px;'></select>"); 

        $('#quarter_select').append($("<option value='1'>1st Quarter</option>" + "<option value='2'>2nd Quarter</option>" + "<option value='3'>3rd Quarer</option>" + 
        "<option value='4'>4th Quarter</option>")); 

        for (i = new Date().getFullYear() ; i > 2008; i--) { 
        $('#year_select').append($('<option />').val(i).html(i)); 
        } 

    } else if($('#date_select option:selected').val() == 'anually') { 
     console.log('anually'); 
    } 
}); 

基本上它獲取select標籤的選定值並根據它改變裏面的div。

但我的問題是它不會顯示我的預期行爲，但只在使用jquery呈現html的情況下，如果我使用靜態HTML，如上面我註釋的基於選定值工作的靜態HTML，它會觸發if if語句。你能幫助解決我的問題嗎？爲什麼它沒有得到id（我真的不知道是什麼導致了這種行爲，所以我將假設id）。爲什麼會導致這種行爲？非常感謝你。

Answer 1

試試這個：

$(document).on('change', '#date_select', function() { 

，而不是這樣的：

$('#date_select').change(function() {